본문으로 바로가기

[CSS] 동위 선택자

category Helloworld!/CSS 2015.07.09 16:57

선택자 A + 선택자 B : 선택자 바로 뒤에 위치하는 선택자 B 를 선택

선택자 A ~ 선택자 B : 선택자 A 뒤에 위치하는 선택자 B 를 선택


<h1>Header 1</h1>
<h2>Header 2</h2>
<h2>Header 3</h2>
<h2>Header 4</h2>


일때 

h1 + h2 { color : red }
로 하면 Header 1과 Header 2만 텍스트 색이 빨간색으로 변한다.

h1 ~ h2 { color : red }
로 하면 Header 1과 Header 2,3,4 모두 텍스트 색이 빨간색으로 변한다.


즉, h1 바로 뒤에있는 h2 단 하나만 선택하고 싶을때 +

h1 뒤에있는 모든 h2 를 선택하고 싶을때 ~ 를 사용한다 




댓글을 달아 주세요