CSS 선택자

 

선택자

 

선택자 형태	설명	예시
*	HTML페이지 내부의 모든 태그를 선택함	* {color: red;}
태그	특정한 태그를 선택함	h1  {color: red;}
#아이디	아이디 속성을 가지고 있는 태그를 선택함	#header{         width : 800px  ; margin : 0 auth;         background : red;;         }
.클래스	특정한 클래스를 가지고 있는 태그를 선택함	.select { color : red; }
선택자 A 선택자 B	선택자A의 후손에 위치하는 선택자 B를 선택	#header h1 {color:red;} //header id속성을 가지는 태그의 후손위치에 있는 h1태그의 속성
선택자A > 선택자B	선택자 A의 자손에 위치하는 선택자 B를 선택	#header>h1 {color:red;} //header id속성을 가지는 태그의 자손위치에 있는 h1태그의 속성
선택자A,선택자B	여러개를 선택할때 ,를 사용함	/* .box2 p 가 아닌 그냥 p를 쓰면 전체 p태그가 바뀜 */ box2 li, box2 p{color:green;}
선택자 [속성=값]	특정한 속성이 있는 태그를 선택	input [type =password] { background : blue;}
----------------	------------------------------------	-----------------------------------
:active	사용자가 마우스로 클릭한 태그를 선택	자주씀
:hover	사용자가 마우스를 올린 태그를 선택	자주씀
:checked	체크상태의 input태그를 선택
:focus	초점이 맞추어진 input태그를 선택	자주씀
:enabled	사용가능한 input태그를 선택
:disabled	사용 불가능한 input태그를 선택