[CSS] 하위 요소 선택하기

CSS 선택자를 사용하여 특정 요소의 하위 요소에 스타일을 적용하는 방법은 여러 가지가 있습니다. 여기에는 몇 가지 주요 방법들이 있습니다.

1. 자식 선택자(Child Selector): ">" 기호를 사용하여 특정 요소의 직접적인 자식(child) 요소만을 대상으로 스타일을 적용할 수 있습니다.

div > p {
    color: red;
}

위 코드는 div의 직접적인 자식인 p 태그에만 스타일을 적용합니다.

2. 하위 선택자(Descendant Selector): 공백(space)을 사용하여 특정 요소의 모든 하위(descendant) 요소를 대상으로 스타일을 적용할 수 있습니다.

div p {
    color: red;
}

위 코드는 div 내부의 모든 p 태그(직접적인 자식 뿐만 아니라 그 아래 단계까지 포함)에 스타리을 적용합니다.

3. 클래스 및 ID 선택자: 클래스와 ID를 사용하여 특정 클래스나 ID를 가진 하위 요소에 스타일을 적용할 수 있습니다.

div .myClass {
    color: red;
}

div #myId {
    color: blue;
}

첫 번째 코드는 div 내부에서 클래스명이 .myClass 인 모든 요소에게 빨간색 텍스트를 적용하며, 두 번째 코드는 div 내부에서 ID가 #myId 인 모든 요소에게 파란색 텍스트를 적용합니다.

오늘은 CSS 하위 요소 선택하는 방법에 대해서 알아봤습니다.
즐거운 하루 보내세요 :)