Programming/HTML CSS
동위 선택자

구조상 같은 level의 위치에 있는 tag를 선택하는 방법입니다.
<ul>
 <h1>Header 1</h1>
 <h2>Header 2</h2>
 <h2>Header 2</h2>
 <h3>Header 3</h3>
</ul>
위 구조에서 h1, h2, h3 는 모두 같은 위치에 있습니다. 이 상태에서 특정 tag의 바로 앞에 있는 tag를 선택하려면 + 기호를 사용합니다.
h1 + h2 {
 color:red;
}
▶ h1 바로 앞에 있는 h2를 선택합니다.

위 예제는 바로 앞에 있는 것만 해당하므로 세번째 h2는 해당되지 않습니다. 만일 앞에 있는 모든 h2를 선택하려면 ~ 기호를 사용해야 합니다.
h1 ~ h2 {
 color:red;
}
▶ h1 앞에 있는 모든 h2를 선택합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
[HTML / HTML5] fieldset, legend  (0) 2013.05.07
[CSS3] 선택자 - 동위 선택  (0) 2013.05.06
[CSS] z-index, top, left, zoom, float  (0) 2013.05.01
[CSS3] 선택자 - 반응 선택  (0) 2013.04.29
[CSS3] 선택자 - 아이디 선택  (0) 2013.04.26
0 0