CSS 입문 | CSS 선택자 | 속성 선택자

Tags:

속성 선택자(attribute selectors)

속성 선택자를 사용하면 특정 속성이나 특정 속성값을 가지고 있는 HTML 요소를 선택할 수 있다.

기본 속성 선택자

CSS에서 사용할 수 있는 기본 속성 선택자는 다음과 같다.

  • [속성이름] 선택자
  • [속성이름=“속성값”] 선택자

[속성이름] 선택자

문법

[속성이름]

[속성이름] 선택자는 특정 속성을 가지고 있는 요소를 모두 선택한다.

<style>
    [title] { background: black; color: yellow; }
</style>

[속성이름=“속성값”] 선택자

문법

[속성이름="속성값"]

[속성이름=“속성값”] 선택자는 특정 속성을 가지고 있으며, 해당 속성의 속성값까지 일치하는 요소를 모두 선택한다.

<style>
    [title="first h2"] { background: black; color: yellow; }
</style>

문자열 속성 선택자

CSS에서는 기본 속성 선택자 이외에도 문자열 속성 선택자를 제공한다.
문자열 속성 선택자는 HTML 요소가 가지고 있는 특정 속성의 속성값 내에 특정 문자열을 확인하여 선택해 준다.

CSS에서 사용할 수 있는 문자열 속성 선택자는 다음과 같다.

  • [속성이름~=“속성값”] 선택자
  • [속성이름|=“속성값”] 선택자
  • [속성이름^=“속성값”] 선택자
  • [속성이름$=“속성값”] 선택자
  • [속성이름*=“속성값”] 선택자

익스플로러 8과 그 이전 버전에서는 HTML 문서에 <!DOCTYPE html>태그가 삽입되어 있어야만 문자열 속성 선택자를 제대로 인식한다.

[속성이름~=“속성값”] 선택자

문법

[속성이름~="속성값"]

[속성이름~=“속성값”] 선택자는 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택한다.

<style>
    [title~="first"] { background: black; color: yellow; }
</style>

위의 예제에서는 title 속성값이 “first h2"인 요소와 “first p"인 요소만 선택된다.
title 속성값이 “first-p"인 요소는 선택되지 않는다.

이처럼 [속성이름~=“속성값”] 선택자는 title 속성값이 정확히 “first"인 요소나 띄어쓰기(whitespace)를 기준으로 인식되는 단어에 “first"를 포함한 요소만을 선택한다.

[속성이름~=“속성값”] 선택자는 띄어쓰기(whitespace)를 기준으로 단어를 인식한다.
따라서 예제처럼 하이픈(-)으로 연결된 단어는 전부 하나의 단어로 인식하며, 각각 별도의 단어로 인식하지 않는다.

[속성이름|=“속성값”] 선택자

문법

[속성이름|="속성값"]

[속성이름|=“속성값”] 선택자는 특정 속성의 속성값이 특정 문자열로 이루어진 하나의 단어로 시작하는 요소를 모두 선택한다.

<style>
    [title|="first"] { background: black; color: yellow; }
</style>

위의 예제에서는 title 속성값이 “first-p"인 요소만 선택된다.
title 속성값이 “first h2"나 “first p"인 요소들은 선택되지 않는다.

이처럼 [속성이름|=“속성값”] 선택자는 title 속성값이 정확히 “first"인 요소나 “first” 바로 다음에 하이픈(-)으로 시작하는 요소만을 선택한다.

[속성이름^=“속성값”] 선택자

문법

[속성이름^="속성값"]

[속성이름^=“속성값”] 선택자는 특정 속성의 속성값이 특정 문자열로 시작하는 요소를 모두 선택한다.

<style>
    [title^="first"] { background: black; color: yellow; }
</style>

이 선택자는 [속성이름|=“속성값”] 선택자와는 달리 속성값이 특정 문자열로 시작하면 모두 선택해 준다.
따라서 위의 예제에서는 title 속성값이 “first"로 시작되는 요소가 모두 선택된다.

[속성이름$=“속성값”] 선택자

문법

[속성이름$="속성값"]

[속성이름$=“속성값”] 선택자는 특정 속성의 속성값이 특정 문자열로 끝나는 요소를 모두 선택한다.

<style>
    [title$="first"] { background: black; color: yellow; }
</style>

이 선택자는 특정 속성의 속성값이 특정 문자열로 끝나기만 하면 모두 선택해 준다.
따라서 위의 예제에서는 title 속성값이 “first"로 끝나는 요소가 모두 선택된다.

[속성이름*=“속성값”] 선택자

문법

[속성이름*="속성값"]

[속성이름*=“속성값”] 선택자는 특정 속성의 속성값에 특정 문자열를 포함하는 요소를 모두 선택한다.

<style>
    [title*="first"] { background: black; color: yellow; }
</style>

이 선택자는 특정 속성의 속성값이 특정 문자열를 포함하기만 하면 모두 선택해 준다.
따라서 위의 예제에서는 title 속성값에 “first"를 포함하는 요소가 모두 선택된다.

속성 선택자의 활용

위에서 설명한 속성 선택자들을 활용하면 클래스나 아이디의 지정 없이도 스타일을 적용할 HTML 요소를 손쉽게 선택할 수 있다.

<style>
    input[type="text"] { width: 150px; display: block; background-color: #FFEFD5; margin-bottom: 10px; }
    input[type="password"] { width: 130px; display: block; background-color: #90EE90; border: solid 2px red; }
    input[type="password"]:focus { background-color: #FFC0CB; }
</style>



최종 수정 : 2021-08-27