CSS 동위선택자, 상태선택자

1. 동위선택자

선택자 형태	설명
선택자A + 선택자B	선택자A 바로 뒤에 위치하는 선택자B 선택
선택자A ~ 선택자B	선택자A뒤에 위치하는 선택자B 선택

 

<style type="text/css"> h1+h2{color:red} h1~h2{background-color:orange} </style> <h1>header-1</h1> <h2>header-2</h2> <h2>header-3</h2> <h2>header-4</h2>

 

 

2. 상태선택자 : 입력양식의 상태를 선택할때 사용하는 선택자

선택자 형태	설명
:checked	체크상태의 input 태그 선택
:focus	초점이 맞추어진 input 태그 선택
:enabled	사용가능한 input 태그 선택
:disabled	사용 불가능한 input 태그 선택