본문 바로가기

웹프로그래밍/CSS

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 태그 선택 

반응형