CSS 선택자

이 문서에서는 CSS 선택자(selector)에 대해서 다룬다.

선택자란

선택자(Selector)란 문서 내의 요소(Element)를 선택할 수 있도록 작성하는 글자이다. 선택자는 기호에 따라 여러 가지 의미를 가지며, 종류는 크게 다음과 같이 구분해볼 수 있다.

전체 선택자
태그 선택자
속성 선택자
아이디 선택자
클래스 선택자
상태 선택자
연계 선택자
가상 선택자

전체 선택자

전체 선택자는 이름 그대로 모든 요소에 적용시키기 위한 선택자를 말한다. 전체 선택자는 다음과 같이 작성한다.

* {
    /* 적용할 디자인 항목과 속성을 작성 */
}

위와 같이 설정할 경우 문서 내의 모든 요소에 적용되므로 사용할 때 반드시 공통적인 부분들만 설정해야 한다. 주로 사용하는 속성으로는 font, box-sizing 등이 있다.

태그 선택자

특정 태그만 선택하고 싶은 경우에는 태그 선택자를 사용할 수 있다. 태그 선택자의 경우 이름을 통해 선택을 하며, 코드의 형태는 다음과 같다.

태그명 {
    /* 적용할 디자인 항목과 속성을 작성 */
}

전체 선택자와 마찬가지로 많은 수의 태그들을 한 번에 불러와서 처리하기 때문에 특정 태그에 대한 공통 처리들 위주로 작성해야 한다.

만약 모든 h1 태그의 글자색을 빨강으로 설정하고 싶다면 다음과 같이 구문을 작성할 수 있다.

h1 {
    color:red;
}

속성 선택자

속성 선택자는 태그에 부여된 속성을 이용하여 선택하는 선택자를 말한다. 속성이 부여되어있는 태그의 예시는 다음과 같다.

<input type="text" name="id">
<input type="checkbox" name="agree">

위의 경우 둘 다 input 태그로 동일하기 때문에 태그 선택자로는 선택이 어려우며, 태그의 속성인 type이나 name을 이용하여 구분할 수 있다. 따라서 다음과 같이 선택 구문을 만들 수 있다.

/* <input type="text" name="id"> 를 type으로 선택 */
input[type=text] {
    /* 적용할 디자인 항목과 속성을 작성 */
}
/* <input type="text" name="id"> 를 name으로 선택 */
input[name=id] {
    /* 적용할 디자인 항목과 속성을 작성 */
}

/* <input type="checkbox" name="agree"> type으로 선택 */
input[type=checkbox] {
    /* 적용할 디자인 항목과 속성을 작성 */
}
/* <input type="checkbox" name="agree"> name으로 선택 */
input[name=agree] {
    /* 적용할 디자인 항목과 속성을 작성 */
}

아이디 선택자

HTML 태그에는 다음과 같이 id 속성을 부여할 수 있다. id 속성의 특징은 다음과 같다.

id 속성은 페이지 내에서 대상을 유일하게 식별할 수 있어야 한다.
id 속성은 하나의 태그에 하나만 부여할 수 있다.
id 속성은 띄어쓰기가 불가하며, 대시(-)나 언더스코어(_)를 사용할 수 있다.

id가 부여된 태그의 형태는 다음과 같다.

<h1 id="header">...</h1>

이 경우 태그 이름으로 선택도 가능하며, id를 이용하여 선택할 수도 있다. 아이디를 이용하여 선택하는 경우 다음과 같이 코드를 작성할 수 있다.

h1[id=header] {
    /* 적용할 디자인 항목과 속성을 작성 */
}

id 역시 속성이므로 속성 선택자를 이용하여 선택할 수 있지만 id만을 위한 전용 기호인 #을 사용할 수 있다.

h1#header{
    /* 적용할 디자인 항목과 속성을 작성 */
}

id는 유일한 식별자이므로 태그의 이름을 적지 않아도 무관하며, 태그 이름을 작성하지 않는 경우 다음과 같이 작성한다.

#header{
    /* 적용할 디자인 항목과 속성을 작성 */
}

클래스 선택자

class란 선택 또는 그룹화를 위해 부여가 가능한 값을 말한다. class의 특징은 다음과 같다.

class는 태그 하나에 여러 개 부여가 가능하다.
class는 띄어 쓰기를 사용하면 다른 값으로 인식한다.
하나의 class를 여러 개의 태그에 부여할 수 있다.
class를 이용하여 HTML 요소의 그룹화를 수행할 수 있다.

class가 부여된 태그의 예시는 다음과 같다.

<h1 class="headline">테스트 헤더1</h1>
<h1 class="headline headline-bold">테스트 헤더2</h1>

첫 번째 h1 태그는 클래스가 1개 부여되어 있으며, 두 번째 h1 태그는 클래스가 2개 부여되어 있다. 위와 같은 형태의 태그를 선택하기 위해서는 속성 선택자나 클래스 선택자를 사용할 수 있다.

/* 속성 선택자를 사용하여 테스트 헤더1 선택 */
h1[class=headline] { /*...*/ }

/* 속성 선택자를 사용하여 테스트 헤더2 선택 */
h1[class=headline-bold] { /*...*/ }

h1[class=headline][class=headline-bold] { /*...*/ }

/* 클래스 선택자를 사용하여 테스트 헤더1 선택 */
h1.headline { /*...*/ }

.headline{ /*...*/ }

/* 클래스 선택자를 사용하여 테스트 헤더2 선택 */
h1.headline.headline-bold { /*... */ }

.headline.headline-bold { /*...*/ }

class로 대상을 선택할 때도 태그명을 생략할 수 있으며, 같이 적으면 범위가 좀 더 제한된다. 주의사항으로는 .headline.headline-bold 처럼 여러개의 클래스가 적용된 태그를 선택하고 싶을 경우 선택자 사이에 띄어쓰기를 하면 안된다는 것이다.

연계 선택자

연계 선택자는 특정 태그를 기준으로 하여 태그를 선택하기 위한 선택자이다. CSS 선택자에서는 다음 네 가지의 연계 선택을 지원한다.

+ : 기준 태그의 바로 뒤에 있는 한 개의 태그를 선택한다.
~ : 기준 태그의 뒤에 있는 모든 태그를 선택한다.
> : 기준 태그의 바로 밑에 있는 태그를 선택한다.
: 기준 태그의 밑에 있는 모든 태그를 선택한다(띄어쓰기)

주의사항은 상위태그, 전방태그는 선택이 불가능하다는 것이다.

+ 선택자

+ 선택자는 바로 뒤에 있는 태그를 선택한다.

파랑으로 선택된 부분이 기준 태그이며, 빨강으로 선택된 부분이 + 선택자로 선택된 태그이다. 실제로 이 부분에 대해서 이해하기 위해 위의 코드를 구조화 시키면 다음과 같이 작성될 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- h3.tmp(기준태그)
      +-- h3(선택대상)
      +-- h3
      +-- h3
      +-- h3

html 요소들은 tree 형태로 배치되며, 작성 순서대로 위치하기 때문에 같은 깊이(depth)에서 + 선택자를 이용하여 바로 뒤(아래) 있는 태그를 선택할 수 있다.

~ 선택자

+ 선택자에서 작성한 코드를 ~ 선택자를 이용하는 것으로 수정하면 다음과 같이 결과가 달라지게 된다.

~ 선택자는 뒤에 있는 모든 태그를 선택하기 때문에 같은 깊이(depth)에 존재하는 태그를 모두 선택하게 된다. tree 구조로 살펴보면 선택되는 원리를 확인할 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- h3.tmp(기준태그)
      +-- h3(선택대상)
      +-- h3(선택대상)
      +-- h3(선택대상)
      +-- h3(선택대상)

> 선택자

> 선택자는 바로 아래 계층에 존재하는 태그를 선택할 수 있다. 이를 위해서는 조금 더 계층화된 코드가 필요하며, 이를 위해 list 태그를 사용해본다.

list의 경우 중첩하여 계층 구조를 표현하기에 적합하다.

1-1부터 1-5까지만 빨강으로 설정되는 것을 확인할 수 있으며, 그보다 하위에 있는 글자들은 색상이 변하지 않는다는 것을 확인할 수 있다. 이를 tree 계층으로 변환하여 살펴보면 더 쉽게 이해할 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- ul.tmp(기준태그)
          +-- li(하위요소)
          |   +-- a(선택대상)
          +-- li(하위요소)
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          +-- li(하위요소)
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          |   |   +-- li
          |   |   |   +-- a
          +-- li(하위요소)
          |   +-- a(선택대상)
          +-- li(하위요소)
              +-- a(선택대상)

위의 구조를 보면 > 선택자를 통하여 바로 아래 계층만 선택하는 것을 확인할 수 있다.

하위 선택자(띄어쓰기)

특정 태그의 하위(내부)에 존재한 모든 대상에게 효과를 주고 싶은 경우에는 띄어쓰기를 사용한다. > 선택자에서 살펴본 코드를 조금 수정하면 특징을 확인할 수 있다.

실행 결과를 확인해보면 모든 a태그의 글자가 빨강으로 나오는 것을 확인할 수 있다. tree 구조를 통해 살펴보면 기준이 되는 태그에 속해 있는 모든 하위 요소가 다 선택되는 것을 확인할 수 있다.

html
  +-- head
  |   +-- style
  +-- body
      +-- ul.tmp(기준태그)
          +-- li
          |   +-- a(선택대상)
          +-- li
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          +-- li
          |   +-- a(선택대상)
          |   +-- ul
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          |   |   +-- li
          |   |   |   +-- a(선택대상)
          +-- li
          |   +-- a(선택대상)
          +-- li
              +-- a(선택대상)

상태 선택자

상태 선택자는 특정 상태인 경우를 선택하기 위한 선택자이다. 이를 이용하여 다양한 상태에 특화된 디자인을 처리할 수 있다.

:first-child

first-child 상태는 그룹의 첫 번째 요소를 선택하기 위한 선택자이다.

예시 코드와 실행 결과는 다음과 같다.

1-1과 2-1이 빨강으로 변하는 것을 보아 선택되었다는 것을 확인할 수 있다. tree 구조로 확인하면 더 쉽게 이해할 수 있다.

div
  +-- h5(first-child)
  +-- h5
  +-- h5
div
  +-- h5(first-child)
  +-- h5
  +-- h5

h5 태그는 총 6개이지만 div를 기준으로 분할되어있기 때문에 그룹이 2개로 나누어져있다고 볼 수 있다. 따라서 그룹마다 첫 번째 태그가 first-child가 되어 선택되는 것을 알 수 있다.

:first-child 로 선택되려면 반드시 해당 영역의 첫 번째에 위치해야 한다. h5 중에서 처음인 경우가 아니라 영역 내 태그 중 처음이어야 한다.

:last-child

last-child 상태는 그룹의 마지막 요소를 선택하기 위한 선택자이다. first-child의 예제를 변경하여 살펴보도록 한다.

tree 구조로 살펴보면 각각 div 그룹의 마지막 h5 요소가 last-child로 선택된다는 것을 확인할 수 있다.

div
  +-- h5
  +-- h5
  +-- h5(last-child)
div
  +-- h5
  +-- h5
  +-- h5(last-child)

:last-child 로 선택되려면 반드시 해당 영역의 마지막에 위치해야 한다. h5 중에서 마지막인 경우가 아니라 영역 내 태그 중 마지막이어야 한다.

:nth-child()

nth-child 상태는 그룹의 원하는 순서의 요소를 선택하기 위한 선택자이다. 패턴을 통해 반복적으로 선택도 가능하다.

tree 구조로 살펴보면 각각의 그룹에서 nth-child(2)에 해당하는 2번째 요소들이 선택되는 것을 확인할 수 있다.

div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - 2번째 요소
  +-- h5 : nth-child(3)
div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - 2번째 요소
  +-- h5 : nth-child(3)

패턴을 부여하여 홀수 또는 짝수 번째의 태그 선택도 가능하다.

tree 구조를 통해 살펴보면 n이 1, 2, 3, 4로 변할 때 2n은 2, 4, 6, 8이므로 짝수 번째의 요소들이 선택되는 것을 확인할 수 있다.

div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - n=1일 때 선택
  +-- h5 : nth-child(3)
  +-- h5 : nth-child(4) - n=2일 때 선택
div
  +-- h5 : nth-child(1)
  +-- h5 : nth-child(2) - n=1일 때 선택
  +-- h5 : nth-child(3)
  +-- h5 : nth-child(4) - n=2일 때 선택

:not()

not 상태는 특정 요소를 제외하기 위한 선택자이다. () 내부에 제외하고 싶은 내용에 대한 선택자를 기입하여 사용한다.

:hover

hover 상태는 마우스가 올라간 상태일 경우를 선택하는 선택자이다. 마우스가 올라간 경우에만 적용되기 때문에 컴포넌트를 강조하는 용도로 자주 사용된다.

:focus

focus 상태는 입력이 가능한 상태일 경우를 선택하는 선택자이다. 입력이 가능해야 하므로 input, textarea 등 입력 도구에서 사용한다.

:checked

checked 상태는 체크가 되어있는 상태일 경우를 선택하는 선택자이다. 체크박스나 라디오와 같이 체크가 가능한 컴포넌트에서 사용한다. 또한 연계 선택자를 이용하여 체크 여부에 따라 인접 태그에 효과를 부여할 수 있다.

Previous색상(color)Next스타일 우선순위

Last updated 2 years ago