CSS (CSS3) 속성선택자 (attribute selector)

CSS2에서도 지원했지만 CSS3에서 좀더 추가되었다. 예제를 통해간편히 확인해보자.아래 html에서는 각포탈사이와 그에 따라 title속성에 값을 주었다.


<p><a title="tistory" href="#">티스토리</a></p> 
<p><a title="naver" href="#">네이버</a></p> 
<p><a title="potal daum site" href="#">다음</a></p> 
<p><a title="nate-mobile" href="#">네이트</a></p> 
<p><a title="dreamwiz" href="#">드림위즈</a></p> 
<p><a title="yahoo" href="#">야후</a></p> 
<p><a title="TheBestgoogleWeb" href="#">구글</a></p>

이번엔 CSS를 보자 정의 한것

[attr] : 속성값을 가지는경우
[attr=" "] : 속성값이 정확히 일치
[attr~=" "] : 속성값이공백으로 구분한 경우
[attr|=" "] 속성값이 하이픈으로 구분한 경우
아래 세개는 CSS3에 추가된것이다 [attr^=" "] 속성값이 주어진값으로 시작한경우
[attr$=" "]주어진값으로 끝나는경우
[attr*=" "] 속성값이 일부일치한다면 적용

아래는 적용한 예제다


/*title 속성을 가지고 있는 엘리먼트에 모두적용*/
a[title]{border: 1px solid #999; font-size:3em;}
/*title 속성값 naver와 정확히 일치하는 경우*/
a[title="naver"] {color:#0F0;}
/*title 속성값인 daum을 공백으로 구분한 경우*/
a[title~="daum"] {background-color: #09F;}
/*title 속성값인 nate를 하이픈으로 구분한 경우*/
a[title|="nate"] { color:#F00;}
/*title 속성값인 dre로 시작한경우 */
a[title^="dre"] {background-color:#FF0;}
/*title 속성값인 hoo로 끝나는경우*/
a[title$="hoo"] {background-color:#60F;}
/*title 속성값인 google로 일부일치하는경우*/
a[title*="google"] {background-color:#666;}

완성된 예제를 확인하려면 아래주소로

http://sianasiatiger.cafe24.com/study/CSS_selector_attribute.html

*주의 : 속성값의 대소문자는 인식은다르다.google과 Google은 다르단 말

저작자표시