동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
CSS 결합자
결합자는 여러 선택자간의 관계를 설명하는 것입니다.
CSS선택자는 둘 이상의 선택자가 포함될 수 있습니다. 간단히 선택자 사이에는 결합자를 포함할 수 있습니다.
CSS3에는 네가지 결합자가 있습니다.
자손 선택자
자손 선택자는 지정된 요소의 자손 항목인 모든 요소를 찾습니다.
다음 예는 <div>요소 내의 모든 <p>요소를 선택합니다.
div p {
background-color: yellow;
}
자식 선택자
자식 선택자는 지정된 요소의 직접 자식 요소인 모든 요소를 선택합니다.
다음 예는 <div>요소의 바로 자식인 모든 <p>요소를 선택합니다.
div > p {
background-color: yellow;
}
인접한 형제 선택자
인접한 형제 선택자는 지정된 요소의 인접 형제인 모든 요소를 선택합니다.
형제 요소는 같은 부모요소를 가져야 하며 "인접요소"는 "바로 뒤이어"를 의미합니다.
다음 예는 <div>요소 바로 뒤에 배치된 모든 <p>요소를 선택합니다.
div + p {
background-color: yellow;
}
일반 형제 선택자
일반 형제 선택자는 지정된 요소의 형제인 모든 요소를 선택합니다.
다음 예는 <div>요소의 형제인 모든 <p>요소를 선택합니다.
div ~ p {
background-color: yellow;
}
등록된 댓글이 없습니다.