CSS 입문 | CSS 선택자 | 선택자(selector)

선택자(selector)

CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용한다.

대표적인 선택자는 다음과 같다.

  • 전체 선택자
  • HTML 요소 선택자
  • 아이디(id) 선택자
  • 클래스(class) 선택자
  • 그룹(group) 선택자

전체 선택자

CSS를 적용할 대상으로 HTML 문서 내부의 모든 요소를 선택한다.

<style>
    * { color: red; }
</style>

HTML 요소 선택자

CSS를 적용할 대상으로 HTML 요소의 이름을 직접 사용하여 선택할 수 있다.

<style>
    h2 { color: teal; text-decoration: underline; }
</style>
...
<h2>이 부분에 스타일을 적용합니다.</h2>

아이디(id) 선택자

아이디 선택자는 CSS를 적용할 대상으로 특정 요소를 선택할 때 사용한다. 이 선택자는 웹 페이지에 포함된 여러 요소 중에서 특정 아이디 이름을 가지는 요소만을 선택해 준다.

<style>
    #heading { color: sandybrown; text-decoration: line-through; }
</style>
...
<h2 id="heading">이 부분에 스타일을 적용합니다.</h2>

HTML과 CSS에서는 하나의 웹 페이지에 속하는 여러 요소에 같은 아이디 이름을 사용해도 별 문제없이 동작한다.
하지만 이렇게 중복된 아이디를 가지고 자바스크립트 작업을 하게 되면 오류가 발생한다.
따라서 되도록이면 하나의 웹 페이지에 속하는 요소에는 다른 아이디 이름을 사용하거나 클래스를 사용하는 것이 좋다.

클래스(class) 선택자

클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용한다.
이러한 특정 집단을 클래스(class)라고 하며, 같은 클래스 이름을 가지는 요소들을 모두 선택해 준다.

<style>
    .headings { color: deepskyblue; text-decoration: overline; }
</style>
...
<h2 class="headings">이 부분에 스타일을 적용합니다.</h2>
<p>클래스 선택자를 이용하여 스타일을 적용할 HTML 요소들을 한 번에 선택할 수 있습니다.</p>
<h3 class="headings">이 부분에도 같은 스타일을 적용합니다.</h3>

그룹 선택자

그룹 선택자는 위에서 언급한 여러 선택자를 같이 사용하고자 할 때 사용한다.
그룹 선택자는 여러 선택자를 쉼표(,)로 구분하여 연결한다.
이러한 그룹 선택자는 코드를 중복해서 작성하지 않도록 하여 코드를 간결하게 만들어 준다.

<style>
    h2 { color: navy; }
    h2, h3 { text-align: center; }
    h2, h3, p { background-color: lightgray; }
</style>

CSS3 선택자(selector) Level 3

CSS3에서는 다양한 기능을 하는 많은 선택자가 새롭게 정의되었다.

선택자 설명
일반 형제 선택자 해당 요소와 형제 관계에 있으며, 문서의 위치에서 해당 요소보다 뒤에 위치한 모든 특정 요소를 선택함.
[속성이름^=“속성값”] 선택자 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 선택함.
[속성이름$=“속성값”] 선택자 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 선택함.
[속성이름 *=“속성값”] 선택자 특정 속성의 속성값이 특정 문자열로 시작하는 하나의 단어로 된 요소를 선택함.
:root 문서의 루트(root) 요소를 선택함.
:nth-child 모든 자식(child) 요소들 중에서 앞에서부터 n번째에 위치한 자식(child) 요소를 모두 선택함.
:nth-last-child 모든 자식(child) 요소들 중에서 뒤에서부터 n번째에 위치한 자식(child) 요소를 모두 선택함.
:nth-of-type 모든 자식(child) 요소들 중에서 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:nth-last-of-type 모든 자식(child) 요소들 중에서 뒤에서부터 n번째로 등장하는 특정 타입의 요소를 모두 선택함.
:last-child 모든 자식(child) 요소들 중에서 맨 마지막에 위치한 자식(child) 요소를 모두 선택함.
:first-of-type 모든 자식(child) 요소들 중에서 맨 처음으로 등장하는 특정 타입의 요소를 모두 선택함.
:last-of-type 모든 자식(child) 요소들 중에서 맨 마지막으로 등장하는 특정 타입의 요소를 모두 선택함.
:only-child 자식(child) 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:only-of-type 자식(child)  요소로 특정 타입의 요소를 단 하나만 가지는 모든 요소의 자식(child) 요소를 선택함.
:empty 자식(child) 요소를 전혀 가지고 있지 않은 요소를 모두 선택함.
:target 현재 활성화된 target 요소를 모두 선택함.
:checked 체크된(checked) 상태의 input 요소를 모두 선택함.
:enabled 사용할 수 있는 input 요소를 모두 선택함.
:disabled 사용할 수 없는 input 요소를 모두 선택함.
:not(선택자) 모든 선택자와 함께 사용할 수 있으며, 해당 선택자의 의미를 반대로 적용함.