[컴][웹] css 선택자 selector

css selector 종류에 대한 글( http://www.w3.org/TR/CSS2/selector.html )

http://www.typesett.com/2009/09/css-selectors-a-guide-to-the-common-the-rare/

아래에 대략적인 내용을 정리해 본다. 자세한 사항은 위의 link 를 참조하자.

 

UNIVERSAL SELECTOR: 

* {color:blue;}

TYPE SELECTOR: 

body {background-color:blue;}

CUSTOM CLASS & ID SELECTORS:

.emergency {color:blue;} 

#wrapper {background-color: blue;} // id 가 wrapper

p.sidebar {color:blue;} // p element 중class 가 sidebar 인 녀석

DESCENDANT SELECTOR:

body p {color:blue;} // body 가 가지고 있는 모든 p element

CHILD SELECTOR:

ul > li {color:blue;} // ul 바로 아래 있는 li element 만

ADJACENT SIBLING SELECTOR:

h2 + p {color:blue;} // h2 옆 sibling element p 에만 적용

SIMPLE ATTRIBUTE SELECTOR:

a[class] {color:blue} // a element 중 class 가 있는 모든 녀석들

EXACT ATTRIBUTE SELECTOR:

a[rel="next"] {color:blue} // a element 중 rel 이 next 인 녀석

PARTIAL ATTRIBUTE SELECTOR:

a[rel~="party"] {color:blue} // a element 중 rel 의 값이 party 를 포함하며, party 과 space 로 구분지어져 있는 녀석

BEGINNING SUBSTRING SELECTOR:

a[href^="/party"] {color:blue} // a element 중 href 의 값의 시작이 party 인 녀석

ENDING SUBSTRING SELECTOR:

a[href$="/document.pdf"] {color:blue} // a element 중 href 의 값의 마지막이 document.pdf 인 녀석

ARBITRARY SUBSTRING SELECTOR:

a[href*="typesett.com"] {color:blue} // a element 중 attribute href 의 값이 typesett.com 를 포함하는 녀석

LANGUAGE SUBSTRING SELECTOR:(“match or starts with” selector)

body[lang|="en"] {color:blue} // body 중 lang attribute 의 값이 "en" 인 녀석

img[src|="party"] {border-color:blue} // src 가 party 로 시작하는 녀석.