[CSS] 자식선택자, 후손선택자

후손 선택자 (Descendant Selector)

• 정의: 후손 선택자는 특정 요소 아래에 있는 모든 요소를 선택합니다. 이 선택자는 공백( )으로 표현되며, 지정된 요소의 모든 후손(자식, 자식의 자식 등)에 스타일을 적용합니다.
• 사용법: A B 형식으로 사용하며, A 요소 내부에 있는 모든 B 요소에 스타일을 적용합니다.
• 예시: .container p는 .container 클래스를 가진 요소 내부의 모든 <p> 태그를 선택합니다.

<style>
    .container p{
    }
</style>
<div class="container">
    <p>Paragraph 1 (Selected)</p>
    <section> 
        <p>Paragraph 2 (Also Selected)</p> 
    </section> 
</div>

 

자식 선택자 (Child Selector)

• 정의: 자식 선택자는 특정 요소의 직접적인 자식 요소만을 선택합니다. 이 선택자는 > 기호로 표현되며, 부모 요소 바로 아래의 자식 요소에만 스타일을 적용합니다.
• 사용법: A > B 형식으로 사용하며, A 요소의 직접적인 자식인 B 요소에만 스타일을 적용합니다.
• 예시: #parent > div는 id가 parent인 요소의 직접적인 자식인 모든 div 요소를 선택합니다.

<style>
    #parent > div{
    }
</style>
<div id="parent">
    <div>Direct Child (Selected)</div>
    <section>
    	<div>Grandchild (Not Selected)</div>
    </section>
</div>

 

차이점

• 범위: 후손 선택자는 주어진 요소의 모든 후손에 스타일을 적용하는 반면, 자식 선택자는 주어진 요소의 직접적인 자식에만 스타일을 적용합니다.
• 선택 기준: 후손 선택자는 요소의 위치나 깊이에 관계없이 모든 후손 요소를 대상으로 합니다. 자식 선택자는 오직 한 단계 아래의 자식 요소만을 대상으로 합니다.

사용 시 고려 사항

• 성능: 후손 선택자는 선택 범위가 넓기 때문에, 특히 대규모 문서에서는 성능에 영향을 줄 수 있습니다. 가능하다면, 더 구체적인 선택자를 사용하는 것이 좋습니다.
• 유지 관리: 스타일 규칙을 가능한 한 명확하고, 특정한 범위에 한정하여 사용함으로써, 코드의 유지 관리를 용이하게 해야 합니다.