[HTML/CSS] 자식, 자손 요소 선택하기

 

CSS의 선택자 중

자식 요소(부모 요소 바로 하위의 요소),

자손 요소(부모 요소 하위의 요소, 바로 하위가 아니어도 된다)를 선택하는 방법을 알아보도록 하겠습니다.

 

 

자식 요소 선택하기 ( '>' )

부모 요소 바로 하위의 자식 요소를 선택하기 위한 결합자로 '자식 결합자(Child Combinator)'라고 합니다.

부모선택자 > 자식선택자

위와 같은 형식으로 사용하며,

부모 요소 바로 하위의 자식 요소를 선택합니다.

 

<div>
  <h5>자식요소1</h5>
  <h5>자식요소2</h5>
  <span>
    <h5>자손</h5>
  </span>
</div>

div > h5 {
  background-color: yellow;
}

div > h5

div 요소 바로 하위의 h5 요소만 선택합니다.

 

 

 

자손 요소 선택하기 ( ' ' )

보통 한 칸의 공백 문자로 표현하는 '자손 결합자(Descendant Combinator)'는

부모요소 하위의 자식 요소를 선택합니다.

자식 결합자와는 달리, 자식이 부모의 바로 하위에 있지 않아도 됩니다.

부모선택자 자식선택자

위와 같은 형식으로 사용하며,

부모 요소 하위의 모든 자손 요소를 선택합니다.

 

<div>
  <h5>자식요소1</h5>
  <h5>자식요소2</h5>
  <span>
    <h5>자손</h5>
  </span>
</div>

div h5 {
  background-color: yellow;
}

div h5

div 하위에 있는 모든 h5 요소를 선택합니다.