CSS 입문 | CSS 선택자 | 결합 선택자

결합 선택자(Combinators)

CSS 선택자는 하나 이상의 선택자를 포함할 수 있다. 결합 선택자는 연관된 선택자들 간의 관계를 설정해 준다.

하위 선택자(descendant selector)

하위 선택자는 해당 요소의 하위 요소 중에서 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div>태그의 하위 요소 중에서 <p>태그를 모두 선택하는 예제이다.

div p {스타일;}

위의 예제처럼 하위 선택자는 div와 p 사이에 한 칸의 띄어쓰기를 반드시 명시해야 한다.

<style>
    div p { background-color: #FFEFD5; }
</style>

자식 선택자(child selector)

자식 선택자는 해당 요소의 바로 밑에 존재하는 하위 요소 중에서 특정 타입의 요소를 모두 선택한다.

다음 예제는 모든 <div> 태그의 바로 밑에 존재하는 하위 요소 중에서 <p>태그를 모두 선택하는 예제이다.

div > p {스타일;}

<style>
    div > p { background-color: #FFEFD5; }
</style>