CSS - 복합 선택자

📌 목차

• Introduction
• 일치 선택자
• 자식 선택자
• 후손 선택자
• 인접 형제 선택자
• 일반 형제 선택자
• Conclusion

📌 Introduction

📌 일치 선택자

모두 만족하는 선택자 (띄워쓰기가 없다는 것을 유의!🚨)

      span.orange{
        color: red;
      }

    <div>
      <ul>
        <li>apple</li>
        <li>pear</li>
        <li class="orange">orange</li>
      </ul>
      <div>carrot</div>
      <p>tomato</p>
      <span class="orange">orange</span>   <!-- 선택 -->
    </div>

여기서 span과 class="orange"에 해당 하는 것만 color: red로 표시가 됩니다.

📌 자식 선택자

어떤 것의 자손만 선택하는 선택자입니다.

      ul > .orange{
        color: red;
      }

    <div>
      <ul>
        <li>apple</li>
        <li>pear</li>
        <li class="orange">orange</li>  <!-- 선택 -->
      </ul>
      <div>carrot</div>
      <p>tomato</p>
      <span class="orange">orange</span>  
    </div>

ul의 자손중 orange class인것만 선택하게 됩니다.

📌 후손 선택자

후손 선택자는 하위 선택자라고도 불립니다. 일치 선택자와 비슷하게 보이지만 띄어쓰기가 들어가 있습니다.

      div .orange{
        color: red;
      }

    <div>
      <ul>
        <li>apple</li>
        <li>pear</li>
        <li class="orange">orange</li>  <!-- 선택 -->
      </ul>
      <div>carrot</div>
      <p>tomato</p>
      <span class="orange">orange</span>  <!-- 선택 --> 
    </div>

이렇게 div 아래의 후손 요소중 orange 클래스를 가지고 있는 것들을 선택하게 됩니다.

📌 인접 형제 선택자

인접 형제 선택자는 +를 사용합니다. 처음 요소의 다음 하나의 형제요소만 선택합니다.

      .orange + li{
        color: red;
      }

    <div>
      <ul>
        <li>apple</li>
        <li>pear</li>
        <li class="orange">orange</li> 
        <li>mango</li>  <!-- 선택 -->
      </ul>
      <div>carrot</div>
      <p>tomato</p>
      <span class="orange">orange</span>  
    </div>

📌 일반 형제 선택자

일반 형제 선택자는 ~를 사용하게 됩니다. 인접 형제 선택자와 달리 처음 요소의 다음 모든 형제 요소를 선택합니다.

      .orange ~ li{
        color: red;
      }

    <div>
      <ul>
        <li>apple</li>
        <li>pear</li>
        <li class="orange">orange</li> 
        <li>mango</li>  <!-- 선택 -->
        <li>straberry</li> <!-- 선택 -->
        <li>banana</li> <!-- 선택 -->
      </ul>
      <div>carrot</div>
      <p>tomato</p>
      <span class="orange">orange</span>  
    </div>

📌 Conclusion