CSS

게시글 'CSS 선택자(Selector) - 복합선택자'에 대한 정보
CSS 선택자(Selector) - 복합선택자
등록일 2010-04-05 조회 3,586
복합 선택자 : 복합 선택자는 크게 세 가지 종류가 있다.
 - E F (하위 선택자)
 - E > F (자식 선택자)
 - E + F (인접 선택자)

E F (하위 선택자)
E 엘리먼트의 하위에 있는 F 엘리먼트들을 선택한다. 보통 ID Selector와 함께 사용하여 중복 선언을 피하고자 할때 많이 사용한다. 또한 불필요하게 class를 많이 적어주지 않아도 많은 하위 엘리먼트를 한번에 선택 할 수 있기 때문에 유용하고 많이 사용한다.
<ul id="list">
<li><a href="list.html?id=34&type=blah">item 34</a></li>
<li><a href="list.html?id=35&type=blah">item 35</a></li>
...
...
<li><a href="list.html?id=99&type=blah">item 99</a></li>
</ul>
위와 같은 코드에서 a 엘리먼트에 스타일을 적용하고자 할 때 일일이 a 엘리먼트에 class를 기입하지 않아도 아래와 같이 하면 모든 하위 a 엘리먼트에 스타일을 적용 할 수 있다.
ul#list a:link,
ul#list a:visited {
color: #999;
}
ul#list a:hover,
ul#list a:active {
color: #000;
}


E > F (자식 선택자)
E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택한다. descendant selector의 경우 하위에 있는 모든 F 엘리먼트를 선택하는데 비해 child selector는 바로 하위에 있는 F 엘리먼트만을 선택해 온다. 사이트 맵과 같은 중첩된 <ul>을 사용할때 유용하게 사용할 수 있다.
<ul class="depth1">
<li>
<a href="about.html>Company</a>
<ul class="depth2">
<li>
<a href="overview.html">Overview</a>
</li>
<li>
<a href="ceo.html">Ceo.html</a>
</li>
</ul>
</li>
</ul>
위의 코드 에서 ul.depth1과 ul.depth2의 <li>에 스타일을 적용할 경우,
ul.depth1 li {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}
이렇게 정의 하게 되면 ul.depth2의 <li>까지 스티일이 적용 되는 것을 볼 수 있다.
ul.depth1>li {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}

이 때, child selector를 사용해 주면 첫번째 뎁스의 <li>만 선택을 해서 스타일을 적용 할 수 있게 된다. IE6에서는 구현되어 있지 않다.


E + F (인접 선택자)
제목 바로 다음에 나오는 문단의 첫글자를 크게 나타내고자 할 경우 첫번째 글자를 <span>등을 이용해서 따로 선택을 해 주어야 스타일을 적용 할 수 있다. 이럴 경우에 이 셀렉터를 사용하면 별도의 추가 마크업 없이 쉽게 구현 할 수 있다.

h2+p:first-letter {
float: left;
font-size: 2.2em;
}