반응형

맑은커뮤니케이션에서 현재까지(글 작성일 현재) 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


P Element


P Element

P Element


P Element


Span Element

P 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


P Element


Span Element

P Element


P Element

P Element


P Element


P 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


P Element


Span Element

P Element


P Element

Span Element

P Element


P Element


P 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


P Element


Span Element

P Element


P Element

P Element


P Element


P 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
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 설명
E 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
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
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


P Element


Span Element

P Element


P Element

Span Element

P Element


P Element


P 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.
반응형

+ Recent posts