계층선택자

자식선택자 : 부모요소>자식요소{}

요소와 요소가 포함관계에 있을때 상위요소를 참조하여 하위요소를 선택합니다.

  <ol>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ol>
  <ul>
    <li>Lorem Ipsum</li>
    <li>Lorem Ipsum</li>
  </ul>
  

  parent>child{property: value;}
  ul>li{color: red;}
  

상위 ul요소를 참조하여 li요소를 선택합니다. 이때 ol요소의 자식요소 li는 선택되지 않습니다.

후손선택자 : 조상요소 후손요소{}

요소와 요소들이 포함관계에 있을때 최상위요소를 참조하여 하위요소를 선택합니다.

  <ol>
    <li><b>Lorem</b> Ipsum</li>
    <li>Lorem <b>Ipsum</b></li>
  </ol>
  <ul>
    <li><b>Lorem</b> Ipsum</li>
    <li>Lorem <b>Ipsum</b></li>
  </ul>
  

  ancestor descendant{property: value;}
  ul b{color: red;}
  

최상위 ul요소를 참조하여 li요소를 선택합니다. 이때 ol요소의 후손요소 b는 선택되지 않습니다.

동위 선택자 : 형요소+동생요소{}

요소들이 서로 이웃관계에 있을때 특정요소를 참조하여 동생요소와 일치 하는 요소를 선택합니다.

  <h3>Lorem Ipsum</h3>
  <h4>Lorem Ipsum</h4>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  

  prev+next{property: value;}
  

  h3+p{color: blue;}
  

h3+p{}는 h3요소의 바로 동생요소 p를 지정하였으나 html에서 h3요소의 다음 요소는 h4요소이므로 선택되지 않습니다.

  h4+p{color: red;}
  

동위 선택자 : 형요소~동생요소{}

특정 요소의 서로 이웃관계에 있을때 특정요소를 참조하여 동생요소와 일치 하는 요소를 선택합니다.

  <h3>Lorem Ipsum</h3>
  <h4>Lorem Ipsum</h4>
  <p>Lorem Ipsum</p>
  <p>Lorem Ipsum</p>
  

  prev~siblings{property: value;}
  

  h3~p{color: red;}