동위 선택자

동위관계에서 뒤에 위치한 태그를 선택할 때 사용하는 선택자

 

선택자A + 선택자B : 선택자A 바로 뒤에 위치하는 선택자B를 선택

선택자A ~ 선택자B : 선택자A 뒤에 위치하는 선택자B를 모두 선택

 

 

 .a + .b{
    color:red;
  }

 

<h1>선택자A 바로 뒤에 위치하는 선택자B를 선택</h1>
  <ul>
    <li class="a">선택 A</li>
    <li class="b">선택 B</li>
    <li class="c">선택 C</li>
  </ul>

 

 

 

 .a ~ li{
    color:red;
  }

 

 

<h1>선택자A 뒤에 위치하는 선택자B를 모두 선택</h1>
  <ul>
    <li class="a">선택 A</li>
    <li class="b">선택 B</li>
    <li class="c">선택 C</li>
    <li class="d">선택 D</li>
    <li class="e">선택 E</li>
    <li class="f">선택 F</li>
  </ul>