css 선택자

기본 선택자

태그 요소 선택자

예) 

body {} : 바디 태그 css 지정

p{} : p태그 css 지정

태그 요소 다중 선택자

,(콤마)로 여러개 캐그를 한번에 선택

예) body, p, section{} : 바디랑 p태그, section태그 세개의 태그에 한번에 css 지정

id 선택자

태그요소에 지정된 id값을 기준으로 선택

예) #idtest {} : "idtest"라는 아이디를 가진 태그에 css 지정

클래스 선택자

각 태그에 지정된 class명을 기준으로 선택

예)

.classtest{} : "classtest"라는 클래스가 지정된 태그에 css 지정

전역 선택자

전체 태그나 특정 태그의 하위 영역들을 모두 선택할때 사용

예)

* {} : 전체 태그에 css 지정

p * img {} : p태그 하위의 모든 img 태그에 css 지정

하위, 인접 선택자

하위 태그 선택할때 사용

예)

section p {} : section태그 안에 p태그들 선택해서 css 지정

header > h2 {} : header태그 바로 아래 h2태그들 선택해서 css 지정

h3+div {} : h3태그 인접한 div태그들 선택해서 css 지정

속성 선택자

특정 속성 조건에 맞는 태그 선택

예)

a[href^="http://"] {} : href속성값이 "http://"값이 들어가지 않는 a태그들 선택해서 css 지정

img[alt$="jpg"] {} : alt값이 jpg로 끝나는 img 태그들 선택해서 css 지정

div[class*="test"] {} : class명에 "test"가 포함된 div 태그들 선택해서 css 지정

가상 선택자

상황에 따라 클래스가 지정되는 선택자

예)

a:link {} : a태그에 링크가 있으면 css 지정

td:hover {} : td에 마우스가 오버되면 css 지정

p:first-line {} : p태그기 first-line 모드이면 css 지정

p:after {} : p태그가 after 모드이면 css 지정

구조적 가상 선택자