4-2. 다양한 선택자 알아보기 - 3

1. 속성 선택자 (Attribute selectors) 알아보기

언떤 요소를 선택할 경우에 그 요소가 가진 "속성"을 추가로 지정할 수도 있습니다. 속성은 중괄호([, ])안에 적용하고, 속성이 가진 특징에 따라서 다음과 같은 다양한 옵션을 지정할 수 있습니다. 여기서는 몇가지 유용한 속성 선택자를 알아보겠습니다.

※ 속성 선택자는 익스플로러 버전 6이라에서는 적용되지 않습니다.

1-1. "E[foo]"는 "foo"라는 속성을 가진 <E>요소를 선택하는 방법입니다. 다음은 "title" 속성을 가진 <h1>요소를 선택해서 글자 색상을 변경하는 예제입니다.

<style type="text/css"> h1[title]{color: orange;} </style>

1-2. "E[foo='warning']"이라는 속성과 값을 모두 만족시키는 <E>요소를 선택합니다. 다음 코드와 같이 작성하면 <a>요소 중에서 "target='_blank'"라는 속성과 값을 가진 것만 골라낼 수 있습니다. 다음은 <a>요소 중에서 새 창으로 지정한 값을 찾아서 배경 색상을 지정한 예제입니다.

<style type="text/css"> a[target="_blank"]{background-color: orange;} </style>

1-3. "E[foo~='warning']는 "foo"의 속성에 포함된 값이 "warning"을 포함한다는 의미입니다. 여러 단어로 지정된 값이라면 띄어쓰기를 통해 구분된 단어를 지정하면 됩니다. 다음은 <p>요소 중에서 "title"의 속성을 가지고, 그 값으로 "lead"를 폼함하는 요소를 찾아서 배경 색상을 변경한 예정입니다.

<style type="text/css"> p[title~="lead"]{background-color: orange;} </style>

1-4. "E[foo^='warning']"는 "foo"속성의 값 중에서 "warning"으로 시작되는 값을 찾아줍니다. 다음은 <a>요소 중에서 "href" 속성의 값이 "mailto"로 시작하는 요소를 선택해서 배경 색상을 변경하는 예제입니다.

<style type="text/css"> a[href^="mailto"]{background-color: orange;} </style>

1-5. "E[foo|='warning']는 "foo" 속성의 값으로 "warning"을 가지거나 "warning"으로 시작하는 값을 가지는 경우 선택합니다. 이 선택 방법은 주로 요소에 지정된 특정 언어를 값으로 찾아낼 때 사용합니다. 다음의 코드는 문서 내의 모든 요소 중에서 "lang='en'"을 지정한 요소만을 모두(*) 찾아냅니다.

※ "lang"속성은 해당 요소에 언어를 지정하는 속성입니다. 두 자로 된 기본코드는 예약되어 있습니다.

<style type="text/css"> *[lang|="en"]{background-color: orange;} </style>

같은방법으로 다음과 같은 방법도 있습니다.

<style type="text/css"> *:lang(en){background-color: orange;} </style>

※ 이 방법은 익스플러러 6,7 버전에서는 적용되지 않습니다.