..

Search

25) 결합 선택자

결합 선택자


결합 선택자

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>

코딩연습 ▶


연습문제