[HTML / CSS] 선택자 (Selector) 문법 정리

선택자는 CSS 및 JS의 querySelector에서 사용하는 매우 중요한 문법입니다.

 

기본적이지만 중요한 내용이기에 간단한 예시와 함께 정리하였습니다.

 

 

 

용어 정리

태그 == 요소 : 편의상 저는 태그라고 부르는 편이지만 일반적으로 요소라고 작성된 자료들이 많습니다.

 

형제 : 자신과 동등한 관계에 있는 태그

자식 : 자신의 바로 아래에 위치한 태그 

자손 : 자식 + 자식이 포함하고 있는 자식을 모두 포함

 

<!-- 기준이 되는 태그 -->
<div id="container">
    <!-- container의 자식 -->
    <p class='con_child con_grandchild'>container의 자식 1</p>
    <p id='con_child'>container의 자식 2</p>
    <div id="inner">
        <!-- inner의 자식 & container의 자손 -->
        <span class='con_grandchild'>&nbsp; inner의 span 자식 1<br /></span>
        <span>&nbsp; inner의 span 자식 2<br /></span>
        <p>&nbsp; inner의 p 자식 1<br /></p>
        <p>&nbsp; inner의 p 자식 2<br /></p>
    </div>
</div>
<!-- container와 형제 -->
<div id="container2">
    <!-- container2의 자식 -->
    <p>container2의 자식 1</p>
    <p>container2의 자식 2</p>
</div>

 

설명을 위해서 간단히 위와 같은 예제를 작성하였습니다.

 

 

 

 

일반 선택자

- 전체 선택자 : *

* {
    color: red;
}

*를 통하여 모든 태그들을 선택할 수 있습니다.

 

 

 

- 타입 선택자 : 태그명

p {
    color: red;
}

특정 태그명을 작성하면 태그명에 해당하는 태그들만 선택할 수 있습니다.

 

 

 

- 클래스 선택자 : .

.con_grandchild {
    color: red;
}

클래스 선택자를 이용하면 특정 클래스명을 가지는 태그들만 선택할 수 있습니다.

 

 

 

- 아이디 선택자 : #

#con_child {
    color: red;
}

아이디 선택자는 클래스 선택자와 유사한 방식으로 사용 가능합니다.

 

 

 

 

자손 선택자

div div {
    color: red;
}

자손을 선택하는 방법은 선택자 중간에 공백(띄워쓰기)을 작성하여 사용 가능합니다.

 

굳이 위와 같은 방법으로 쓰지 않고, class명이나 id를 줘서도 사용이 가능하지만, 페이지 내 태그가 많은 경우 한 번에 여러 자손을 선택이 가능합니다.

 

위 예시는 div 태그 아래있는 div 태그가 가지고 있는 모든 태그를 선택하라는 의미입니다.

 

 

div div .con_grandchild {
    color: red;
}

자손 선택자는 여러 번 중첩해서 사용할 수 있습니다.

 

이번 예제는 div의 자식인 div가 가지는 자식 중 .con_grandchild라는 클래스를 가지는 태그를 선택한다는 의미입니다.

 

 

 

 

자식 선택자

#container > p {
    color: red;
}

앞서 용어 설명에서 간단히 설명드렸듯이 태그의 자식이란, 본인의 바로 하위에 위치하는 태그들을 의미합니다.

 

현재는 container라는 id를 가진 태그의 하위에 포함된 p 태그만을 선택하였습니다.

 

따라서 앞서 자손 선택자와는 다르게 inner태그의 자식인 p 태그들(container의 자손)은 선택되지 않는 것을 확인할 수 있습니다.

 

 

 

 

형제 선택자

- 첫 번째 형제 선택 : + 

#inner .con_grandchild + * {
    color: red;
}

형제 선택자 중 +를 사용하면 나와 형제 관계인 태그 중 첫 번째 하나를 선택합니다.

 

현재는 inner의 span1의 첫 번째 형제를 선택했으므로, span2가 선택되는 것을 확인할 수 있습니다.

 

 

위 css 코드 실행 시 자신의 위에 형제 0번째가 있더라도 이는 무시되며 아래에 있는 첫 번째 형제인 2가 선택됩니다. 

 

 

 

- 모든 형제 선택자 : ~ 

#inner .con_grandchild ~ * {
    color: red;
}

앞선 첫 번째 형제 선택자인 + 대신 ~을 사용하면 자신과 동등한 모든 형제가 선택됩니다.

 

이때 마찬가지 자신보다 위에 위치한 형제는 선택되지 않습니다.

 

 

 

 

가상 클래스 선택자

가상 클래스 선택자란 id, class, tag 등의 선택자가 아님에도, 선택자인 것처럼 사용할 수 있도록 만들어져 제공되는 선택자들을 의미합니다.

 

:link	방문하지 않은 링크 선택
:visited	방문한 링크 선택
:hover	해당 태그에 마우스를 위치하는 경우 선택
:active	지정된 태그가 활성화 된 경우 선택
:focus	지정된 태그가 포커스를 가지는 경우 선택
:enabled	지정된 태그가 enabled 상태인 경우 선택
:disabled	지정된 태그가 disabled 상태인 경우 선택
:checked	지정된 태그가 checked 상태인 경우 선택

가상 선택자들은 일반적으로 하이퍼링크에서 가장 많이 접할 수 있습니다.

 

가령 홈페이지에서 기본 하이퍼링크 색상이 파란색이지만, 내가 클릭한 적 있는 하이퍼링크는 색상이 보라색으로 변경되는 것을 경험해 보신 적이 있으실 겁니다.

 

이러한 기능을 제공할 때 사용하는 것이 가상 클래스 선택자입니다.

 

 

 

가상 클래스 자식 선택자

가상 클래스를 사용하면 위에 기능 뿐만 아니라 특정 자식들도 선택할 수 있습니다.

 

:first-child	첫 번쨰 자식을 선택
:nth-child([n + ] 값)	위치에 해당하는 자식을 선택 (1부터 시작)
:last-child	마지막 자식을 선택

 

#inner *:first-child {
    color: red;
}
#inner *:nth-child(2) {
    color: blue;
}
#inner *:nth-child(3n) {
    color: orange;
}
#inner *:nth-child(3n + 4) {
    color: navy;
}
#inner *:last-child {
    color: green;
}

위 예제에서 볼 수 있듯이 각각의 자식을 선택할 수 있습니다.

 

이때 자식을 선택한다고 해서 #inner:first-child와 같이 부모에서 바로 선택하도록 작성하는 것이 아닙니다.

 

이렇게 된다면 자식 중 특정 속성이나 태그인 태그들만을 선택할 수 없으므로, 부모가 가진 어떠한 자식을 선택 조건에 포함할 것인지를 모두 작성해야 합니다. 

 

 

:first-child와 :last-child는 각각 처음과 마지막 자식을 선택합니다.

 

:nth-child()의 경우 span1과 같이 특정한 자식 하나만 선택하도록 사용하는 방법이 있습니다.

 

이때 자식을 선택하는 번호는 첫 번째가 1입니다.

(일반적인 프로그래밍 언어는 0으로 시작하기 때문에 헷갈릴 가능성이 있습니다.)

 

 

반면 span2는 배수에 해당하는 모든 자식들을 선택하도록 숫자 뒤에 n이 작성되어 있습니다.

 

현재는 간단한 예제를 보여드리기 위해서 추가적인 자식이 없지만 만약 자식이 9개라면 3번째, 6번째, 9번째가 선택될 것입니다. 

 

 

span3는 nth-child(3n + 4)라고 작성되어 있는데, 이는 4번째 자식부터 시작하여 3의 배수(4 ,7, 10, ...)에 해당하는 자식들을 navi 색상으로 수정하라는 의미입니다.

 

 

 

 

속성 선택자

속성 선택자는 특정 속성 또는 특정 값을 가지는 태그들을 선택하는 선택자입니다.

 

[속성]	해당 속성을 가지는 모든 태그 선택
[속성=V]	속성 값과 V가 정확히 일치하는 경우 (다른 속성 포함 기준)
[속성~=V]	V를 가지고 있는 경우
[속성^=V]	V로 시작하는 경우
[속성*=V]	V를 포함하는 경우
[속성$=V]	V로 끝나는 경우
[속성|=V]	V와 속성값이 같거나, V로 시작하는 경우

 

 

# style.css
[class] {
    border: 1px solid black;
}

[class='angel'] {
    color: mediumslateblue;
}

[class~='angel'] {
    text-align: center;
}

[class^='angel'] {
    font-size: x-large;
}

[class*='angel'] {
    background-color: yellowgreen;
}

[class$='angel'] {
    font-style: italic;
}


# index.html
<p class="angel">angel</p>
<p class="angel player">angel player</p>
<p class="angelplayer">angelplayer</p>
<p class="whoisangel">whoisangel</p>
<p class="angelplayer8">angelplayer8</p>

속성 선택자는 크게 어려운 내용은 없으며, 천천히 읽어보시고 확인하면 충분히 이해하실 수 있습니다.