CSS의 선택자 지정 방법을 알아봅니다. 여기서는 엘리먼트의 속성을 선택하는 경우 사용 가능한 선택자 방법입니다.


# CSS 속성을 선택자로 지정하는 방법
DOM 엘리먼트, 태그 요소는 여러가지 어트리뷰트, 속성을 가지고 있습니다. 이 값을 가지고 CSS에서 선택하는 방법으로 속성 선택자를 사용하는 방법입니다 키워드는 []를 사용하고 이를 사용하여 해당하는 속성을 가진 요소에만 스타일 지정을 할 수가 있죠. 그럼 아래를 봐주세요.


! CSS 속성 선택자 사용방법
먼저 간단한 사용방법입니다. 속성선택자를 사용하려면 아래와 같이 중괄호[]를 넣고 그 안에 해당 속성을 넣어주어 사용합니다. id 또는 class외에도 사용자 정의 속성역시 사용이 가능합니다. 참고로 CSS 속성 선택자는 IE 7(인터넷 익스플로러 7)이상의 버전에서 지원합니다.

a[속성이름="속성값"] { color: red; }


a 태그에 속성을 찾아 color: red를 적용하는 코드입니다. 이처럼 속성을 기준으로 찾을 수 있습니다.


! CSS 속성 선택자 사용 예제
간단한 예제입니다. a 태그는 href 속성 값을 가지고 있죠. 일치하는 값을 찾아 스타일을 적용해보려 합니다.
<a href="webisfree.com">

위의 href 속성을 선택하기 위해 아래의 방법을 사용합니다.

<style>
a[href] { color:red; }
// href 속성이 있는 모든 요소에 스타일 지정

a[href="webisfree.com"] { color:red; }
// href 속성 값이 webisfree.com인 요소에 지정
</style>

다양한 속성을 가진 태그가 필요하므로 아래와 같이 있다고 가정합니다.
<a href="1 webisfree 2">
<a href="1-webisfree-2">
<a href="test_webisfree_test">
<a href="webisfreetest">
​​​​​​​<a href="testwebisfree">

이제 위 태그에 적용하는 CSS 코드입니다.
<style type="text/css">
a[href~="webisfree"] { color: red; }
// 공백 사이의 값이 동일한 경우 ~ 기호사용

a[href|="webisfree"] { color: red; }
// 하이픈 사이의 값이 동일한 경우 | 기호사용

a[href*="webisfree"] { color: red; }
// 특정 문구가 포함된 경우 * 기호사용

a[href^="webisfree"] { color: red; }
// 특정 문구로 시작하는 경우 ^ 기호사용

a[href$="webisfree"] { color: red; }
// 특정 문구로 끝나는 경우 $ 기호사용
</style>

만약 두개의 속성 선택자를 지정하려면 아래와 같이 사용하면 가능합니다.


! 여러개의 멀티 속성에 스타일 적용하기
예를들어... a 태그에서 href 속성과 class 속성을 가진 요소에 폰트색을 red로 적용한다면!
<style>
  a[href][class] { color: red; }
  // 위처럼 두개의 괄호를 사용함
</style>

보시는 것과 멀티로 적용하는 것도 가능합니다.