CSS - 선택자 다루기

* { color:red; } → 전체 선택자

h1 { color:red; } → 태그 선택자 (h1, dt 등)

#h1 { color:red; } <h1 id="h1">h1 tag</h1> → id선택자 (단, id 속성은 unique해야 함)

.red { color:red; } <h1 class="red">h1 tag</h1> → 클래스 선택자 (클래스 속성은 중복 가능)

.red {color:red;} .blue{color:blue;} <h1 class="red blue">h1 tag</h1>과 같이 사용 가능 

[class] { color:red; } → 속성 선택자, [class='red']도 가능

이외에도 다양한 문자열 속성 선택자가 있음

h1, p { color:blue;} → 그룹 선택자

div > h1 { color: red;} → 자식 선택자 (특정 자식에 해당하는 내용만 지정, div태그 자식에 있는 h1 선택자에 대해서만 지정)

div h1 { color: red; } → 하위 선택자 (공백으로 구분 div하위 요소의 모든 h1 태그)

h2 + h3 { color:red; } → 인접형제 선택자 (h2요소와 형제관계에있는 h3 요소를 선택, 뒤에있는게 나중에 나와야 함, 단일)

h2 ~ h3 { color:red; } → 일반형제 선택자 (h2요소 다음에 오는 h3는 모두 다 선택 됨)

a::before {content: 'test';} // a::after{content: 'test';} → 가상 요소 선택자

a:link{color:red;} a:visited{color:red;} a:hover{color:red;} a:active{color:red;} input:focus{color:red;}

input:checked + label { color:red; } → 가상 클래스 선택자 (disabled, enabled등도 가능)

li:first-child { color:red; }, li:last-child { color:red; }, li:nth-child(3) { color:red; } → 구조적 가상 클래스 선택자

 

선택자는 다양한 방식으로 조합이 가능함