Post

CSS 선택자(selector) 종류부터 사용법 정리

CSS 선택자는 웹 페이지에서 특정 HTML 요소를 선택하여 스타일링할 수 있게 해줍니다. 이 글에서는 CSS 선택자의 종류부터 자손, 자식 선택자, 그리고 ::after, ::before 선택자 등 다양한 선택자에 대한 사용법을 설명합니다.

1. CSS 선택자의 종류

CSS 선택자(selector)는 HTML의 특정 요소를 타겟팅 할때 사용하며, 종류가 다양합니다. 이 글에서는 가장 기본적인 선택자부터 자주 사용하진 않지만, 알아두면 더 세밀하게 타켓팅할 수 있는 선택자까지 살펴봅니다.

1.1. 요소 선택자

요소 선택자는 HTML 문서의 특정 태그를 선택합니다. 예를 들어, 모든 p 태그를 선택하려면 아래와 같이 작성합니다.

1
2
3
p {
    color: blue;
}

또는 모든 div 태그를 선택하려면 아래와 같이 작성합니다.

1
2
3
div {
    background-color: yellowgreen;
}

1.2. 클래스 선택자

클래스 선택자는 특정 클래스 속성을 가진 모든 요소를 선택합니다. 클래스 선택자는 점(.)을 사용하여 정의합니다.

1
2
3
4
<div>
  <p>이 내용은 <span class="highlight">매우 중요합니다.</span></p>
  <p>이 내용은 <span class="second-highlight">그 다음으로 중요합니다.</span></p>
</div>
1
2
3
4
5
6
.highlight {
    color: red;
}
.second-highlight {
    color: blue;
}

클래스 선택자 클래스 선택자

1.3. ID 선택자

ID 선택자는 고유한 id 속성을 가진 단일 요소를 선택합니다. ID 선택자는 해시(#)를 사용하여 정의합니다.

1
2
<p id="unique">이것은 ID 선택자 입니다.</p>
<p class="unique">이것은 class 선택자 입니다.</p>
1
2
3
4
#unique {
    font-weight: bold;
    color: blue;
}

ID 선택자 ID 선택자

1.4. 속성 선택자

속성(property) 선택자는 특정 속성을 가진 요소를 선택합니다.

1
2
<input type="text" name="username">
<input type="password" name="password">
1
2
3
input[type="password"] {
    border: 1px solid red;
}

속성 선택자 속성 선택자

1.5. 전체 선택자

전체 선택자(*)는 모든 형태의 모든 요소를 선택합니다.

1
2
3
4
5
6
7
8
<div>
  <h1>애국가 1절</h1>
  <div>
    <p>동해물과 백두산이 마르고 닳도록</p>
    <p>하느님이 보우하사 우리나라만세</p>
    <p>(후렴)무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세</p>
  </div>
</div>
1
2
3
* {
  color: green;
}

전체 선택자 전체 선택자

2. 계층적 선택자

CSS에서는 요소 간의 계층적 관계를 이용해 스타일을 지정할 수 있습니다. 여기에는 ‘자손 선택자’와 ‘자식 선택자’가 포함됩니다.

2.1. 자손 선택자

자손 선택자는 특정 요소 내의 모든 하위 요소를 선택합니다. 공백을 사용하여 정의합니다.

아래 예제에서는 .container 클래스 내의 모든 p 태그를 선택합니다.

1
2
3
4
5
6
7
<div class="container">
    <p>부모 요소의 직계 자식 요소입니다.</p>
    <div>
        <p>부모 요소의 자손 요소입니다.</p>
    </div>
    <span>해당 부분은 선택되지 않습니다.</span>
</div>
1
2
3
.container p {
    background-color: yellowgreen;
}

자손 선택자 자손 선택자

2.2. 자식 선택자

자식 선택자는 특정 요소의 직계 자식만을 선택합니다. > 기호를 사용하여 정의합니다.

1
2
3
4
5
6
<div class="parent">
    <p>부모 요소의 직계 자식 요소입니다.</p>
    <div>
        <p>부모 요소의 자손 요소입니다.</p>
    </div>
</div>
1
2
3
.parent > p {
    color: blue;
}

자식 선택자 자식 선택자

위의 예제에서는 .parent 클래스의 직계 자식인 p 태그만 선택합니다.

3. 가상 요소 선택자

가상 요소 선택자는 요소의 앞 또는 뒷 부분을 스타일링하는 데 사용됩니다. 선택자로는 ::before::after가 있습니다.

3.1. ::before 선택자

::before 선택자는 요소의 콘텐츠 앞에 생성된 가상 요소를 선택합니다. 주로 콘텐츠를 추가하거나 꾸미는 데 사용됩니다.

1
<p class="note">web2와 web3의 차이점은?</p>
1
2
3
4
5
6
.note::before {
    content: "Note: ";
    font-weight: bold;
    background-color: #dbe4ff;
    border: 1px solid #4c6ef5;
}

::before 선택자 ::before 선택자

위의 예제에서는 .note 클래스의 p 태그 앞에 “Note: “라는 텍스트가 추가됩니다.

3.2. ::after 선택자

::after 선택자는 요소의 콘텐츠 뒤에 생성된 가상 요소를 선택합니다.

1
<p class="note">web2와 web3의 차이점은?</p>
1
2
3
4
5
.note::after {
    content: " Read more.";
    font-style: italic;
    color: #4c6ef5;
}

위의 예제에서는 .note 클래스의 p 태그 뒤에 “ Read more.”라는 텍스트가 추가됩니다.

::after 선택자 ::after 선택자

4. 고급 선택자

4.1. 속성 값의 시작 부분 매칭

속성 값의 시작 부분을 매칭하는 선택자는 ^= 기호를 사용합니다.

1
2
<a href="https://naver.com">Naver</a>
<a href="http://google.com">Google</a>
1
2
3
a[href^="https"] {
    color: orange;
}

위의 예제에서는 href 속성이 “https”로 시작하는 모든 a 태그를 선택합니다.

property 값의 시작 부분 매칭 property 값의 시작 부분 매칭

4.2. 속성 값의 끝 부분 매칭

속성 값의 끝 부분을 매칭하는 선택자는 $= 기호를 사용합니다.

1
2
<img src="image.png">
<img src="photo.jpg">
1
2
3
img[src$=".jpg"] {
    border: 2px solid red;
}

property 값의 끝 부분 매칭 property 값의 끝 부분 매칭

위의 예제에서는 src 속성이 “.jpg”로 끝나는 모든 img 태그를 선택합니다.

4.3. 속성 값의 포함 매칭

속성 값에 특정 문자열을 포함하는 선택자는 *= 기호를 사용합니다.

1
2
3
<div class="box-content">Content</div>
<div class="box-header">Header</div>
<div class="footer">Footer</div>
1
2
3
4
div[class*="box"] {
    padding: 10px;
    background-color: #96f2d7;
}

위 예제에서는 클래스 이름에 “box”를 포함하는 모든 div 태그를 선택합니다.

property 값의 포함 매칭 property 값의 포함 매칭

This post is licensed under CC BY 4.0 by the author.