CSS 선택자

by Kim Ara

HTML

<div id="wrap">
  <ul>
    <li>
      <ul>
        <li>열공중이다</li>
        <li>열공중이다</li>
      </ul>
    </li>
    <li>안녕 안녕</li>
    <li class="not">안녕 안녕</li>
  </ul>
  <ul>
    <li>하하하</li>
    <li data-info="bg">하하하</li>
  </ul>
  <p>바보야</p>
  <p>뭐 이 바보야</p>
</div>

<a href="#none" data-info="bg">앵커1</a>
<a href="#none" title="앵커2">앵커2</a>
<a href="http://www.chocoemon.com/" target="_blank">앵커3</a>
<a href="http://www.chocoemon.com/" target="_blank">앵커3</a>
<a href="#none" title="앵커2" data-info="bg size">앵커2</a>

CSS

ul + p {color:blue} /* 앞의 요소 바로 뒤에 있는 요소만 선택 */
ul ~ p {text-decoration:underline} /* 앞의 요소 뒤에 있는 모든 요소 선택 */


div#wrap > ul  {color:red} /* 직계 자식 선택 */

/* 속성 선택자 */
a{text-decoration:none}
a:hover{border-bottom:1px solid}

a[title]{font-weight:bold}
a[href="http://www.chocoemon.com/"]{font-size:25px}
a[href^="http"]{
  background:url(https://ssl.pstatic.net/sstatic/search/pc/img/sp_sns.png)no-repeat;
  padding-left:20px
}
a[data-info="bg"]{background:green;color:#fff}
a[data-info~="bg"]{background:green;color:#fff}
a[data-info~="size"]{font-size:20px}

li:not(.not){background:#eee}

p::first-letter{border:1px solid} /* 반드시 블록속성에서 사용 */

ul:first-of-type{border:1px solid red}

ul > li > ul > li:first-of-type {font-weight:bold;color:pink}