[CSS] 복합 선택자(Combinators)

일치 선택자(Basic Combinator)

html
<ul>
  <li class="green">적용O</li>
</ul>
<span class="green">적용X</span>

css
li.green {
    color : green;
}

• A와 B를 동시에 만족하는 요소를 선택

자식 선택자(Child Combinator)

html
<div>
  <ul>
    <li class="green">적용X</li>
  </ul>
</div>

<div>
  <span class="green">적용O</span>
</div>

css
div > .green {
    color : green;
}

• A의 자식 요소 B를 선택
• 자식은 부모 바로 밑에 있는 요소
• ‘>'는 자식 선택자의 기호

후손(하위) 선택자(Descendant Combinator)

html
<div>
  <ul>
    <li class="green">적용O</li>
  </ul>
</div>

<div>
  <span class="green">적용O</span>
</div>

css
div .green {
    color : green;
}

• A의 후손 요소 B를 선택
• 후손은 부모 하위에 있는 모든 요소
• ‘띄어쓰기'는 후손 선택자의 기호

일반형제 선택자(General Sibling Combinator)

html
<div>
  <ul>
    <li class="green">적용X</li>
    <li>적용O</li>
    <li>적용O</li>
  </ul>
</div>

<div>
  <p class="green">적용X</p>
  <p class="green">적용O</p>
</div>
<p>적용X</p>

css
.green ~ li{
    color : green;
}
.green ~ p{
    color : green;
}

• A의 다음 형제 요소 모두를 선택
• 형제는 부모가 같은 요소를 뜻함
• '~'는 일반형제 선택자의 기호