--> [HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자

[HTML5/CSS3] CSS 선택자 #3 - 하위 선택자 / 자식 선택자 / 등위 선택자

안녕하세요. CSS 선택자와 관련된 3번째 포스팅입니다. 오늘 배울 선택자는 하위 선택자와 자식 선택자 그리고 등위 선택자가 되겠습니다. 





   1. 하위 선택자와 자식 선택자


먼저 태그 구조에서 자손과 자식에 대한 개념을 살펴보겠습니다.



<h1><div><p> 태그를 활용하여 작성한 간단한 HTML 코드입니다. 해당 코드의 태그 구조를 tree 구조로 살펴보면 다음과 같습니다.


후손이라는 말은 특정 태그에 종속되어 있는 모든 하위 요소들을 의미합니다. 위 구조에서 html 태그의 후손에 해당하는 태그들인 <head><body><h1><div> 태그들에 이에 해당합니다.


자식 태그의 경우는 특정 태그에 종속되면서 바로 한 단계 아래에 해당하는 요소들을 의미합니다. 위 그림에서 body 태그의 자식 태그들은 <h1><div> 태그를 의미합니다. 물론 이 두 개의 태그는 html의 후손 태그이기도 합니다.


이러한 개념을 CSS 선택자에 적용하여 선택자를 지정할 수 있는 것이 바로 하위 선택자와 자식 선택자가 됩니다. 아래 샘플 예제를 참조 바랍니다.



body > div { border : 2px solid black;} Rule Set은 <body>태그의 자식 요소에 해당하는 태그들 중에서 div 태그를 선택하여 border을 설정하라는 의미입니다.

#content p { color : red;} RuleSet은 태그 id 값이 content의 후손 요소에 해당하는 태그들 중에서 p 태그의 color 속성값을 red로 설정하라는 의미로 해석이 됩니다.




  2. 등위 선택자


등위 선택자는 동등한 위치에 있는 태그를 선택하여 CSS 속성을 지정할 수 있는 태그를 의미합니다. 


 A ~ B

 A에 해당하는 태그와 동등한 위치에 있는 B 선택

 A + B

 A에 해당하는 태그와 동등한 위치에 있는 인접한 태그


아래 샘플 예제를 참고바랍니다.


h1 ~ p 선택자는 h1과 동일한 위치에 있는 p 태그를 선택하여 color 속성값을 red로 지정하라는 의미입니다. Content1 ~ Content5 까지 모두 적용이 된 것을 확인할 수 있습니다. 반면 h1 + p의 경우는 동등한 위치에 있으면서 가장 인접한 태그 하나를 선택하게 됩니다. 결과를 보면 Content1만 font-size 속성이 적용이 된 것을 확인할 수 있습니다.

댓글(0)

Designed by JB FACTORY