'가상 선택자' 태그의 글 목록

가상 선택자

CSS3 Selectors Level 1 ~ 3 2012.01.19

CSS3 Selectors Level 1 ~ 3

2012. 1. 19. 16:04

트윗하기

맑은커뮤니케이션에서 현재까지(글 작성일 현재) Completed Work로 규격의 정의가 끝나 모든 모던 브라우저에서 실 사용이 가능한 Selectors Level 3 까지의 Selector들에 대해 정리해 보았습니다.

이전 http://biew.co.kr/10 포스트에서와 같이 selectivizr를 이용하면 사용 가능한 Selector들이 있고, 이를 사용하면 불필요한 클래스(특히 class="last" 또는 class="first" 등) 없이 사용 가능하므로 Front-end 단 Mark up 작성자도 편하고, Server 단 개발자와의 협업도 조금 더 수월해 질 것 입니다.
Selector는 많이 이해하고 응용력이 풍부할 수록 상상 이상의 디자인들을 심플하고 시멘틱한 마크업에 이미지 없이 입혀줄 수도 있습니다. (물론 다른 CSS3들과의 아름다운 조화가 필요합니다.)

현재 예제로 입력된 내용들이 썩 좋다고 이야기 드릴 수 없어서 죄송할 따름입니다만, 더 적합하고 이해하기 쉬운 예제들을 건의해주신다면 업데이트 하도록 하겠습니다.

(※ CSS3 예제들 같은 경우엔 IE를 제외한 브라우저에서 보셔야 정상적인 화면을 보실 수 있습니다. IE9도 지원은 하되 예제가 잘 안나오는 현상이 있습니다.)

CSS3에서 새로 추가된 Seletor

HTML5에서 새로 추가된 input Type

Selector

지원 Browser

설명

E[attr^=val]

ie7 ie8 ie9 firefox chrome safari opera

'attr' 속성의 값이 'val'으로 시작하는 요소를 선택

Mark up

/* CSS */
.attrStartChar::after {display:block;clear:both;content:''}
.attrStartChar > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrStartChar > li[title^=Chrome] {border:3px solid purple}

/* HTML */
<ul class="attrStartChar">
     <li title="Internet Explorer">Internet Explorer</li>
     <li title="Firefox Browser">Firefox</li>
     <li title="Chrome Browser">Google Chrome</li>
     <li title="Safari Browser">Apple Safari</li>
</ul>

Result

Internet Explorer
Firefox
Google Chrome
Apple Safari

E[attr$=val]

ie7 ie8 ie9 firefox chrome safari opera

'attr' 속성의 값이 'val'으로 끝나는 요소를 선택

Mark up

/* CSS */
.attrEndChar::after {display:block;clear:both;content:''}
.attrEndChar > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrEndChar > li[title$=Browser] {border:3px solid purple}

/* HTML */
<ul class="attrEndChar">
     <li title="Internet Explorer">Internet Explorer</li>
     <li title="Firefox Browser">Firefox</li>
     <li title="Chrome Browser">Google Chrome</li>
     <li title="Safari Browser">Apple Safari</li>
</ul>

Result

Internet Explorer
Firefox
Google Chrome
Apple Safari

E[attr*=val]

ie7 ie8 ie9 firefox chrome safari opera

'attr' 속성의 값에 'val'이 포함된 요소를 선택

Mark up

/* CSS */
.attrAllChar::after {display:block;clear:both;content:''}
.attrAllChar > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrAllChar > li[title*=icon] {border:3px solid purple}

/* HTML */
<ul class="attrAllChar">
     <li title="icon creator">icon creator</li>
     <li title="nice graphics">nice graphics</li>
     <li title="amazing icon list">amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>

Result

icon creator
nice graphics
amazing icon list
greate png icons 25

E:root

ie9 firefox chrome safari opera

문서의 최상위 요소(html, xml) 선택

E:nth-child(n)

ie9 firefox chrome safari opera

앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택 (E아닌 요소의 순서가 계산에 포함됨)

Mark up

/* CSS */
.nthC_list::after {display:block;clear:both;content:''}
.nthC_list > li{float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthC_list.num {float:left;margin-right:30px}
.nthC_list.num span, .nthC_list.num p {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthC_list.num span:nth-child(3) {border:3px solid purple}
.nthC_list.odd_list > li:nth-child(odd) {border:3px solid purple}
.nthC_list.even_list > li:nth-child(even) {border:3px solid purple}
.nthC_list.etc > li:nth-child(3n+2) {border:3px solid purple}

/* HTML */
<div class="nthC_list num">
     <p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>
<div class="nthC_list num">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>

<ul class="nthC_list odd_list">
     <li>John William Mauchly</li>
     <li>John Adam Presper Eckert Jr.</li>
     <li>John Vincent Atanasoff</li>
     <li>Clifford Edward Berry</li>
</ul>

<ul class="nthC_list even_list">
     <li>John William Mauchly</li>
     <li>John Adam Presper Eckert Jr.</li>
     <li>John Vincent Atanasoff</li>
     <li>Clifford Edward Berry</li>
</ul>

<ul class="nthC_list etc">
     <li>list1</li>
     <li>list2</li>
     <li>list3</li>
     <li>list4</li>
     <li>list5</li>
     <li>list6</li>
     <li>list7</li>
     <li>list8</li>
</ul>

Result

P Element

Span Element
P Element

P Element

P Element

P Element

P Element

Span Element
P Element

P Element
- John William Mauchly
- John Adam Presper Eckert Jr.
- John Vincent Atanasoff
- Clifford Edward Berry
- John William Mauchly
- John Adam Presper Eckert Jr.
- John Vincent Atanasoff
- Clifford Edward Berry
- list1
- list2
- list3
- list4
- list5
- list6
- list7
- list8

E:nth-last-child(n)

ie9 firefox chrome safari opera

뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택 (E아닌 요소의 순서가 계산에 포함됨)

Mark up

/* CSS */
.nthLc_wrap {float:left;margin-right:30px}
.nthLc_wrap > p, .nthLc_wrap > span {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthLc_wrap > span:nth-last-child(4) {border:3px solid purple}

/* HTML */
<div class="nthLc_wrap">
<p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>
<div class="nthLc_wrap">
<p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>

Result

P Element

Span Element

P Element

Span Element

P Element

E:nth-of-type(n)

ie9 firefox chrome safari opera

E 요소 중 앞으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함됨)

Mark up	/* CSS / .nthOt_wrap span {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box} .nthOt_wrap span:nth-of-type(5) {border:3px solid purple} / HTML */ <div class="nthOt_wrap"> <span>DOS</span><br><span>Windows</span><br><span>Mac OS</span><span>UNIX</span><br><span>LINUX</span> </div>
Result	DOS Windows Mac OSUNIX LINUX

E:nth-last-of-type(n)

ie9 firefox chrome safari opera

E 요소 중 끝으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함됨)

Mark up	/* CSS / .nthLot_wrap span, .nthLot_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box} .nthLot_wrap span:nth-last-of-type(1) {border:3px solid purple} / HTML */ <div class="nthLot_wrap"> <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p> </div>
Result	P Element P Element Span Element P Element P Element

E:last-child

ie9 firefox chrome safari opera

마지막에 등장하는 요소가 E라면 선택 (E 아닌 요소의 순서가 계산에 포함됨)

Mark up

/* CSS */
.lc_wrap {float:left;margin-right:30px}
.lc_wrap span, .lc_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.lc_wrap span:last-child {border:3px solid purple}

/* HTML */
<div class="lc_wrap">
<p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="lc_wrap">
<p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><span>Span Element</span>
</div>

Result

P Element

Span Element

P Element

Span Element

E:first-of-type

ie9 firefox chrome safari opera

E 요소 중 첫 번째 E를 선택 (E 요소의 순서만 계산에 포함됨)

Mark up

/* CSS */
.fOt_wrap {float:left;margin-right:30px}
.fOt_wrap span, .fOt_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.fOt_wrap p:first-of-type {border:3px solid purple}

/* HTML */
<div class="fOt_wrap">
<p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="fOt_wrap">
<span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>

Result

P Element

Span Element

P Element

Span Element

P Element

E:last-of-type

ie9 firefox chrome safari opera

E 요소 중 마지막 E를 선택 (E 요소의 순서만 계산에 포함됨)

Mark up

/* CSS */
.lOt_wrap {float:left;margin-right:30px}
.lOt_wrap span, .lOt_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.lOt_wrap span:last-of-type {border:3px solid purple}

/* HTML */
<div class="lOt_wrap">
<p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="lOt_wrap">
<p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><span>Span Element</span>
</div>

Result

P Element

Span Element

P Element

Span Element

E:only-child

ie9 firefox chrome safari opera

E 요소가 유일한 자식이면 선택 (E 아닌 요소가 포함되면 선택안함)

Mark up	/* CSS / .oc_wrap {float:left;margin-right:30px} .oc_wrap span, .oc_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box} .oc_wrap p:only-child {border:3px solid purple} / HTML */ <div class="oc_wrap"> <p>P Element</p><br><span>Span Element</span> </div> <div class="oc_wrap"> <p>P Element</p> </div>
Result	P Element Span Element P Element

E:only-of-type

ie9 firefox chrome safari opera

E 요소가 유일한 타입이면 선택 (E 아닌 요소가 포함되어도 선택)

Mark up	/* CSS / .oOt_wrap {float:left;margin-right:30px} .oOt_wrap span, .oOt_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box} .oOt_wrap p:only-of-type {border:3px solid purple} / HTML */ <div class="oOt_wrap"> <p>P Element</p><br><span>Span Element</span> </div> <div class="oOt_wrap"> <p>P Element</p> </div>
Result	P Element Span Element P Element

E:empty

ie9 firefox chrome safari opera

텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택

Mark up	/* CSS / .empty_list::after {display:block;clear:both;content:''} .empty_list > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box} .empty_list > li:empty {border:3px solid purple} / HTML */ <ul class="empty_list"> <li>첫번째</li> <li></li> <li>세번째</li> </ul>
Result	첫번째 세번째

E:target

ie9 firefox chrome safari opera

E의 URI가 요청되면 선택 (따라서 E는 ID가 지정되어야 함)

Mark up

/* CSS */
.targetUl::after {display:block;clear:both;content:''}
.targetUl > li {float:left;margin-bottom:10px}
.targetUl > li > a {display:inline-block;padding:5px 10px}
.targetDiv {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.targetDiv:target {border:3px solid purple}

/* HTML */
<ul class="targetUl">
     <li><a href="#target1">#target1 go</a></li>
     <li><a href="#target2">#target2 go</a></li>
     <li><a href="#target3">#target3 go</a></li>
</ul>
<div id="target1" class="targetDiv">target1</div>
<div id="target2" class="targetDiv">target2</div>
<div id="target3" class="targetDiv">target3</div>

Result

#target1 go
#target2 go
#target3 go

target1

target2

target3

E:enabled

ie9 firefox chrome safari opera

사용 가능한 폼 컨트롤(input, textarea, select, button) E를 선택

Mark up

/* CSS */
.enabled_list::after {display:block;clear:both;content:''}
.enabled_list > li {float:left;margin:5px}
.enabled_list > li input[type=text]:enabled {border:2px solid purple}
.enabled_list > li input[type=checkbox]:enabled {box-shadow: 0 0 0 2px purple}
.enabled_list > li button:enabled {border:2px solid purple;color:purple}

/* HTML */
<ul class="enabled_list">
     <li><input type="text" disabled="disabled" /></li>
     <li><input type="text" /></li>
     <li><input type="checkbox" disabled="disabled" /></li>
     <li><input type="checkbox" /></li>
     <li><button disabled="disabled">button</button></li>
     <li><button>button</button></li>
</ul>

Result

E:disabled

ie9 firefox chrome safari opera

사용 불가능한 폼 컨트롤(input, textarea, select, button) E를 선택

Mark up

/* CSS */
.disabled_list::after {display:block;clear:both;content:''}
.disabled_list > li {float:left;margin:5px}
.disabled_list > li input[type=text]:disabled {border:2px solid purple}
.disabled_list > li input[type=checkbox]:disabled {box-shadow: 0 0 0 2px purple}
.disabled_list > li button:disabled {border:2px solid purple;color:purple}

/* HTML */
<ul class="disabled_list">
     <li><input type="text" disabled="disabled" /></li>
     <li><input type="text" /></li>
     <li><input type="checkbox" disabled="disabled" /></li>
     <li><input type="checkbox" /></li>
     <li><button disabled="disabled">button</button></li>
     <li><button>button</button></li>
</ul>

Result

E:checked

ie9 firefox chrome safari opera

선택된 폼 컨트롤(input check="checked") E를 선택

Mark up	/* CSS / .checked_list::after {display:block;clear:both;content:''} .checked_list > li {float:left;margin:5px} .checked_list > li input[type=checkbox]:checked {box-shadow: 0 0 0 2px purple} / HTML */ <ul class="checked_list"> <li><input type="checkbox" /></li> <li><input checked="checked" type="checkbox" /></li> </ul>
Result

E:not(S)

ie9 firefox chrome safari opera

S가 아닌 E 요소를 선택

Mark up	/* CSS / .not_list::after {display:block;clear:both;content:''} .not_list > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box} .not_list > li:not(:nth-child(2n)) {border:3px solid purple} / HTML */ <ul class="not_list"> <li>list1</li> <li>list2</li> <li>list3</li> <li>list4</li> <li>list5</li> </ul>
Result	list1 list2 list3 list4 list5

E~F

ie9 firefox chrome safari opera

E 요소가 앞에 존재하면 F를 선택

Mark up

/* CSS */
.wave_warp ul {margin:7px 0 20px}
.wave_warp ul:last-child {margin-bottom:0}
.wave_warp ul::after {display:block;clear:both;content:''}
.wave_warp ul > li{float:left;margin-right:15px}
.wave_warp h3~ul {color: orangered}

/* HTML */
<div class="wave_warp">
     <h3>Won</h3>
     <ul>
         <li>1000 <span>원</span></li>
         <li>2000 <span>원</span></li>
         <li>500 <span>원</span></li>
         <li>100 <span>원</span></li>
     </ul>
     <h3>US Dollar</h3>
     <ul>
         <li>1 <span>달러</span></li>
         <li>2 <span>달러</span></li>
     </ul>
     <h4>US Cent</h4>
     <ul>
         <li>50 <span>센트</span></li>
         <li>10 <span>센트</span></li>
     </ul>
</div>

Result

Won

1000 원
2000 원
500 원
100 원

US Dollar

1 달러
2 달러

US Cent

50 센트
10 센트

CSS1 Seletor

기존 input Type

Selector

지원 Browser

설명

ie6 ie7 ie8 ie9 firefox chrome safari opera

E 요소를 선택

Mark up	/* CSS / .e_select_wrap span {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid purple;box-sizing:border-box} / HTML */ <div class="e_select_wrap"> <span>P Element</span> </div>
Result	P Element

E:link

ie6 ie7 ie8 ie9 firefox chrome safari opera

아직 방문한 적이 없는 hypertext의 앵커 E를 선택

Mark up	/* CSS / .link_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box} / HTML */ <div class="link_wrap"> <a href="#">Anchor Element</a> </div>
Result	Anchor Element

E:visited

ie6 ie7 ie8 ie9 firefox chrome safari opera

이미 방문한 hypertext의 앵커 E를 선택

Mark up	/* CSS / .visited_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box} .visited_wrap a:visited {border:3px solid darkcyan} / HTML */ <div class="visited_wrap"> <a href="#">Anchor Element</a> </div>
Result	Anchor Element

E:active

ie6 ie7 ie8 ie9 firefox chrome safari opera

E 요소에 마우스가 클릭되어 있거나 엔터가 눌려있는 동안 E를 선택

Mark up

/* CSS */
.active_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.active_wrap a:visited {border:3px solid darkcyan}
.active_wrap a:active {border:3px solid goldenrod}

/* HTML */
<div class="active_wrap">
<a href="#">Anchor Element</a><span>마우스를 클릭하고 있어보세요.<br>(마우스를 띄는 순간 색상이 원상복귀됩니다.)</span>
</div>

Result

Anchor Element마우스를 클릭하고 있어보세요.
(마우스를 띄는 순간 색상이 원상복귀됩니다.)

E:hover

ie6 ie7 ie8 ie9 firefox chrome safari opera

E 요소에 마우스가 올라가 있는 동안 E를 선택

Mark up	/* CSS / .hover_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box} .hover_wrap a:visited {border:3px solid darkcyan} .hover_wrap a:active {border:3px solid goldenrod} .hover_wrap a:hover {border:3px solid lightcoral} / HTML */ <div class="hover_wrap"> <a href="#">Anchor Element</a><span>마우스 커서를 올려보세요.</span> </div>
Result	Anchor Element마우스 커서를 올려보세요.

E:focus

ie6 ie7 ie8 ie9 firefox chrome safari opera

E 요소에 포커스가 머물러 있는 동안 E를 선택

Mark up

/* CSS */
.focus_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.focus_wrap a:visited {border:3px solid darkcyan}
.focus_wrap a:active {border:3px solid goldenrod}
.focus_wrap a:hover {border:3px solid lightcoral}
.focus_wrap a:focus {border:3px solid lightcoral}

/* HTML */
<div class="focus_wrap">
     <a href="#">Anchor Element</a>
     <span>
         마우스로 클릭해보세요.<br>
         (마우스를 클릭하고 있지 않아도 유지되며, 다른 곳을 클릭하여 포커스가 사라지는 순간 색상이 원상복귀됩니다.)
     </span>
</div>

Result

Anchor Element 마우스로 클릭해보세요.
(마우스를 클릭하고 있지 않아도 유지되며, 다른 곳을 클릭하여 포커스가 사라지는 순간 색상이 원상복귀됩니다.)

E::first-line

ie7 ie8 ie9 firefox chrome safari opera

E 요소의 첫 번째 라인을 선택(블럭요소에서만 사용가능)

Mark up	/* CSS / .firstLine_wrap::first-line {color:lightcoral} / HTML */ <div class="firstLine_wrap"> 오늘의 날씨는 "맑음"입니다.<br> 즐거운 마음으로 하루를 활기차게 보냅시다.<br> 내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다. </div>
Result	오늘의 날씨는 "맑음"입니다. 즐거운 마음으로 하루를 활기차게 보냅시다. 내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다.

E::first-letter

ie7 ie8 ie9 firefox chrome safari opera

E 요소의 첫 번째 문자를 선택(블럭요소에서만 사용가능)

Mark up	/* CSS / .firstLetter_wrap::first-letter {color:lightcoral} / HTML */ <div class="firstLetter_wrap"> 오늘의 날씨는 "맑음"입니다.<br> 즐거운 마음으로 하루를 활기차게 보냅시다.<br> 내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다. </div>
Result	오늘의 날씨는 "맑음"입니다. 즐거운 마음으로 하루를 활기차게 보냅시다. 내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다.

E.warning

ie6 ie7 ie8 ie9 firefox chrome safari opera

클래스의 이름의 warning으로 지정된 E 요소 선택

Mark up	/* CSS / span.warning {color:lightcoral} / HTML */ <span class="warning">warning class</span>
Result	warning class

E#myid

ie6 ie7 ie8 ie9 firefox chrome safari opera

아이디의 이름이 myid로 지정된 E 요소 선택

Mark up	/* CSS / span#myid {color:lightcoral} / HTML */ <span id="myid">myid id</span>
Result	myid id

E F

ie6 ie7 ie8 ie9 firefox chrome safari opera

E 요소의 자손인 F 요소를 선택

Mark up	/* CSS / .eInF span span {color:lightcoral} / HTML */ <div class="eInF"> <span>P Element in <span>span Element</span></span> </div>
Result	P Element in span Element

CSS2 Seletor

기존 input Type

Selector

지원 Browser

설명

ie6 ie7 ie8 ie9 firefox chrome safari opera

모든 요소를 선택

Mark up	/* CSS / .starSeletor_wrap {color:lightcoral} /* HTML */ <div class="starSeletor_wrap"> <span>p Element,</span><br> <span>span Element,</span> <blockquote data-ke-style="style1">blockquote Element,</blockquote> <dl> <dt>dt Element,</dt> <dd>dd Element</dd> </dl> </div>
Result	p Element, span Element, blockquote Element, dt Element, dd Element

E[attr]

ie7 ie8 ie9 firefox chrome safari opera

'attr' 속성이 포함된 요소 E를 선택

Mark up

/* CSS */
.attrNormal::after {display:block;clear:both;content:''}
.attrNormal > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrNormal > li[title] {border:3px solid purple}

/* HTML */
<ul class="attrNormal">
     <li title="icon creator">icon creator</li>
     <li>nice graphics</li>
     <li>amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>

Result

icon creator
nice graphics
amazing icon list
greate png icons 25

E[attr=var]

ie7 ie8 ie9 firefox chrome safari opera

'attr' 속성의 값이 정확하게 일치하는 'var'이 포함되는 요소를 선택

Mark up

/* CSS */
.attrVar::after {display:block;clear:both;content:''}
.attrVar > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrVar > li[title='amazing icon list'] {border:3px solid purple}

/* HTML */
<ul class="attrVar">
     <li title="icon creator">icon creator</li>
     <li title="nice">nice graphics</li>
     <li title="amazing icon list">amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>

Result

icon creator
nice graphics
amazing icon list
greate png icons 25

E[attr~=var]

ie7 ie8 ie9 firefox chrome safari opera

'attr' 속성의 값에 공백으로 분리된 값이 일치하는 'var'이 포함되는 요소를 선택

Mark up

/* CSS */
.attrWaveChar::after {display:block;clear:both;content:''}
.attrWaveChar > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrWaveChar > li[title~=icon] {border:3px solid purple}

/* HTML */
<ul class="attrWaveChar">
     <li title="icon creator">icon creator</li>
     <li title="nice graphics">nice graphics</li>
     <li title="amazing icon list">amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>

Result

icon creator
nice graphics
amazing icon list
greate png icons 25

E[attr|=var]

ie7 ie8 ie9 firefox chrome safari opera

'attr' 속성의 값이 'val' 또는 'val-'으로 시작되는 요소 E를 선택

Mark up

/* CSS */
.attrDashChar::after {display:block;clear:both;content:''}
.attrDashChar > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrDashChar > li[id|=icon] {border:3px solid purple}

/* HTML */
<ul class="attrDashChar">
     <li id="icon-1">icon num1</li>
     <li id="icon-2">icon num2</li>
     <li id="icon-3">icon num3</li>
     <li id="icon-4">icon num4</li>
     <li id="icon-5">icon num5</li>
</ul>

Result

icon num1
icon num2
icon num3
icon num4
icon num5

E:first-child

ie7 ie8 ie9 firefox chrome safari opera

처음에 등장하는 요소가 E라면 선택 (E 아닌 요소의 순서가 계산에 포함됨)

Mark up

/* CSS */
.fc_wrap {float:left;margin-right:30px}
.fc_wrap > p, .fc_wrap > span {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.fc_wrap > span:first-child {border:3px solid purple}

/* HTML */
<div class="fc_wrap">
<p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="fc_wrap">
<span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>

Result

P Element

Span Element

P Element

Span Element

P Element

E:lang(en)

ie8 ie9 firefox chrome safari opera

HTML lang 속성의 값이 'en'으로 지정된 요소를 선택

Mark up

/* CSS */
.lang_wrap span{font-weight:bold}
.lang_wrap ul{margin-top:7px}
.lang_wrap ul > li {margin:2px 0}
.lang_wrap ul > li:lang(en) {color:lightcoral}

/* HTML */
<div class="lang_wrap">
     <span>"안녕"의 다른 나라 말들</span><br>
     <ul>
         <li lang="en">Hello</li>
         <li lang="de">Hallo</li>
         <li lang="it">Ciao</li>
         <li lang="pt">oi</li>
     </ul>
</div>

Result

"안녕"의 다른 나라 말들

Hello
Hallo
Ciao
oi

E::before

ie8 ie9 firefox chrome safari opera

E 요소의 시작 지점에 생성된 요소를 선택

Mark up	/* CSS / .before_list > li {position:relative;margin:5px 0;padding-left:12px} .before_list > li::before {display:block;position:absolute;top:50%;left:0;width:4px;height:4px;background-color:lightcoral;transform:translateY(-50%);content:''} / HTML */ <ul class="before_list"> <li>iPhone</li> <li>Mac mini</li> <li>Macbook air</li> <li>iPad</li> </ul>
Result	iPhone Mac mini Macbook air iPad

E::after

ie8 ie9 firefox chrome safari opera

E 요소의 끝 지점에 생성된 요소를 선택

Mark up

/* CSS */
.after_list::after {display:block;clear:both;content:''}
.after_list > li {float:left;position:relative;margin:5px 0;padding:0 10px}
.after_list > li::after {display:block;position:absolute;top:50%;right:0;width:1px;height:12px;background-color:lightcoral;transform:translateY(-50%);content:''}
.after_list > li:last-child::after {display:none}

/* HTML */
<ul class="after_list">
     <li>500</li>
     <li>800</li>
     <li>1000</li>
     <li>5000</li>
</ul>

Result

500
800
1000
5000

E>F

ie7 ie8 ie9 firefox chrome safari opera

E 요소의 자식인 F 요소를 선택

Mark up

/* CSS */
.gt_list li {margin-left:10px}
.gt_list > li > ul > li {color:lightcoral}

/* HTML */
<ul class="gt_list">
     <li>리스트 내용
         <ul>
             <li>리스트 내 리스트
                 <ul>
                     <li>그 안의 또 리스트</li>
                     <li>그 안의 또 리스트</li>
                 </ul>
             </li>
             <li>리스트 내 리스트</li>
             <li>리스트 내 리스트</li>
         </ul>
     </li>
     <li>리스트 내용</li>
     <li>리스트 내용</li>
</ul>

Result

리스트 내용
- 리스트 내 리스트
  - 그 안의 또 리스트
  - 그 안의 또 리스트
- 리스트 내 리스트
- 리스트 내 리스트
리스트 내용
리스트 내용

E+F

ie7 ie8 ie9 firefox chrome safari opera

E 요소 바로 다음에 오는 F 형제 요소를 선택

Mark up	/* CSS / .plus_wrap h4 {margin-bottom:7px} .plus_wrap h4 + span {color:lightcoral} / HTML */ <div class="plus_wrap"> <h4>Apple iPhone</h4> <span>It's the most amazing iPhone yet.</span><br> <span>Copyright © 2012 Apple Inc. All rights reserved.</span> </div>
Result	Apple iPhone It's the most amazing iPhone yet. Copyright © 2012 Apple Inc. All rights reserved.

참조

저작자표시

'CSS' 카테고리의 다른 글

[CSS3] 새로운 스타일 (0)	2012.11.30
CSS 초보자를 위한 팁 CSS Shorthand (줄여쓰기, 속기) (0)	2012.01.30
[반응형웹]미디어쿼리(MediaQuery) CSS 및 HTML 사용 팁 (0)	2012.01.13
[웹표준코딩]CSS 폰트단위 (0)	2012.01.11
CSS 핵(hack) 정리 (2)	2012.01.03

PREV 1 NEXT