CSS3 선택자

선택자

선택자 종류	선택자 형태	특이사항
전체 선택자	*
태그 선택자	태그
아이디 선택자	#아이디
클래스 선택자	.클래스
속성 선택자	선택자[속성 = 값]
	선택자[속성 ~=값]
	선택자[속성 |= 값]
	선택자[속성 ^= 값]
	선택자[속성 $= 값]
	선택자[속성 *= 값]
후손 선택자	선택자 선택자
자손 선택자	선택자 > 선택자
반응 선택자	선택자:active	일반선택자
	선택자:hover
상태 선택자	:checked	입력양식태그 전용
	:focus
	:enabled
	:disabled
구조 선택자	선택자:first-child	형제 관계에서 n번째 선택자
	선택자:last-child
	선택자:nth-child(수열)
	선택자:nth-last-child(수열)
동위 선택자	선택자 + 선택자
	선택자 ~ 선택자
링크 선택자	:link
	:visited
문자 선택자	:first-letter
	:first-line
	:after
	:before
	:selection
부정 선택자	선택자:not(선택자)

여러개의 선택자 선택

선택자,선택자,선택자 { 데코 }

클래스 중복 할당

<a class="link1 link2">~~</a>

선택자[속성=값]

input[type="password"] { 데코 }

후손 선택자

.upper #down #header h1;

• #header h1, #header h2 와 #header h1, h2가 다름에 유의

상태 선택자

input:focus { 데코 }

반응 선택자

input:hover { 데코 }

구조선택자

형제관계!(자손,후손을 잘 생각해보면 알수있음)

<ul>
  <li>1st</li>
  <li>2nd</li>
  <li>3rd</li>
</ul>

윤인성 선생님의 CSS3 저서를 참고했습니다.