CSS의 선택자_두번째 | 속성선택자 - STUDY

속성선택자

태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정할 수 있습니다.

[속성] 형식

지정한 속성을 가지고 있는 요소를 찾아 스타일을 적용합니다. <style> a[href] { background:yellow; } </style> <h3>선택자</h3> <ul> <li> <a href="one.html">속성 선택자</a> </li> <li> <a href="two.html">가상클래스 선택자</a> </li> </ul> 적용결과:
선택자
· 속성 선택자
· 가상클래스 선택자
A 태그 중 href라는 속성이 있는 요소를 찾아내 거기에 배경색을 노란색으로 적용합니다.

[속성 = 값] 형식

주어진 속성과 값이 일치하는 요소를 찾아 스타일을 적용합니다. <style> a [target="_blank"] { background:yellow; } </style> <h3>선택자</h3> <ul> <li> <a href="one.html" target="_blank">속성 선택자</a> </li> <li> <a href="two.html">가상클래스 선택자</a> </li> </ul> 적용결과:
선택자
· 속성 선택자
· 가상클래스 선택자
A 태그 중에서 target=“_blank”인 링크, 새 탭으로 열리는 링크에 배경색을 노란색으로 적용합니다.

[속성 ~= 값] 형식

[속성=값] 과 다르게 비교할 값이 여러 개일 경우, 그 중 하나만 일치해도 스타일을 적용합니다. <style> h4 [title~="웹아이"] { background:yellow; } h4 [title~="디벨로드"] { text-decoration:underline; } </style> <h3>CSS의 선택자</h3> <h4 title="웹아이">선택자</h4> <h4 title="웹아이 디벨로드">속성 선택자</h4> <h4 title="디벨로드">가상클래스 선택자</h4> 적용결과:
선택자
속성 선택자
가상클래스 선택자
H4 태그 중 title의 값이 “웹아이”인 경우 배경색을 노란색으로 적용합니다.
H4 태그 중 title의 값이 “디벨로드”인 경우 글자에 밑줄을 적용합니다.
title이 “웹아이 디벨로드”인 경우 둘 다 적용합니다.

[속성 ^= 값] 형식

지정한 문자로 시작하는 속성값에 대해서만 스타일을 적용합니다. <style> h4 [title^="웹아이"] { background:yellow; } </style> <h3>CSS의 선택자</h3> <h4 title="웹아이 디벨로드">선택자</h4> <h4 title="웹아이 코딩">속성 선택자</h4> <h4 title="개발 웹아이">가상클래스 선택자</h4> 적용결과:
CSS의 선택자
선택자
속성 선택자
가상클래스 선택자
H4 태그중 title의 값이 “웹아이”로 시작하는 요소에 배경색을 노란색으로 적용합니다.

[속성 $= 값] 형식

지정한 문자로 끝나는 속성에 대해서만 스타일을 적용합니다.
CSS3부터 정의되었습니다. <style> a [href $= "hwp"] { background:yellow; } </style> <h3>선택자</h3> <ul> <li> <a href="one.hwp">속성 선택자</a> </li> <li> <a href="two.xls">가상클래스 선택자</a> </li> </ul> 적용결과:
선택자
· 속성 선택자
· 가상클래스 선택자
A 태그의 href속성 값 중에서 hwp로 끝나면 배경색을 노란색으로 적용합니다.

[속성 |= 값] 형식

속성이 지정한 값으로 시작하면 스타일을 적용합니다. <style> a [class |= "red"] { background:yellow; } </style> <h3>선택자</h3> <ul> <li> <a class="red" href="one.hwp">속성 선택자</a> </li> <li> <a class="red-bg" href="two.xls">가상클래스 선택자</a> </li> </ul> 적용결과:
선택자
· 속성 선택자
· 가상클래스 선택자 A 태그 중 class 속성이 “red”로 시작하면 배경색을 노란색으로 적용합니다.
정확하게 “red”이거나 뒤에 하이픈(-)이 있는 경우에 사용할 수 있습니다.

[속성 *= 값] 형식

속성값이 앞이나 뒤, 또는 중간 등 어느 위치에 있든지 해당값이 포함되어 있으면 스타일이 적용됩니다. <style> a [class *= "red"] { background:yellow; } </style> <h3>선택자</h3> <ul> <li> <a class="red bg" href="one.hwp">속성 선택자</a> </li> <li> <a class="red-bg" href="two.xls">가상클래스 선택자 1</a> </li> <li> <a class="bg-red" href="two.xls">가상클래스 선택자 2</a> </li> </ul> 적용결과:
선택자
· 속성 선택자
· 가상클래스 선택자1 · 가상클래스 선택자2 A 태그 중 class의 속성값에 "red"가 포함되어 있으면 배경색을 노란색으로 적용합니다.

이상 스타일 시트의 속성을 이용한 선택자에 대해 알아보았습니다.