css 선택자

<div>
    <span></span>
    <strong></strong>
    <span><em class="a"></em></span>
    <span><em class="b"></em></span>
    <p></p>
    <p><em class="a"></em></p>
</div>

 

• strong 아래에 있는 span들 선택하기 (형제 선택자)
  - strong ~ span
• span 바로 다음 형제 p 태그 첫번째만 선택하기(인접 형제 선택자)
  - span + p
• a클래스 자식을 가지고 있는 부모만 선택하기
  - span .a:only-child, p .a:only-child
• 자식이 없는 span만 선택하기
  - span:empty

 

** css선택자 게임으로 익히기

http://flukeout.github.io

CSS Diner

- 사이트에는 32레벨까지 있고 오른쪽에는 힌트, 도움말이 첨부되어있다.