[CSS]셀렉터

셀렉터

자식 셀렉터

header > p { }
header 바로 안에 있는 p

첫 번째로 입력한 요소의 바로 아래 자식인 요소

---

후손 셀렉터

header p { }
header 안에 있는 모든 p

첫 번째로 입력한 요소에 있는 모든 요소

---

형제 셀렉터

section ~ p { }
section 다음에 있는 모든 p

부모 요소를 공유, 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소

---

인접 형제 셀렉터

section + p { } section 다음에 있는 p

부모 요소를 공유, 첫 번째 입력한 요소 바로 뒤에 오는 두 번째 입력한 요소

---

가상 클래스 셀렉터

요소의 상태 정보에 기반해 선택

a:link {
} /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited {
} /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover {
} /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active {
} /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus {
} /* 포커스가 들어와 있을 때 선택합니다. */

---

UI 요소 상태 셀렉터

input:checked + span {
} /*체크 상태일 때 선택합니다. */
input:enabled + span {
} /*사용 가능한 상태일 때 선택합니다. */
input:disabled + span {
} /*사용 불가능한 상태일 때 선택합니다. */

---

구조 가상 클래스 셀렉터

p:first-child {
}
ul > li:last-child {
}
ul > li:nth-child(2n) {
}
section > p:nth-child(2n + 1) {
}
ul > li:first-child {
}
li:last-child {
}
div > div:nth-child(4) {
}
div:nth-last-child(2) {
}
section > p:nth-last-child(2n + 1) {
}
p:first-of-type {
}
div:last-of-type {
}
ul:nth-of-type(2) {
}
p:nth-last-of-type(1) {
}

---

부정 셀렉터

input:not([type="password"]) {
}
div:not(:nth-of-type(2)) {
}

---

정합성 확인 셀렉터

input[type="text"]:valid {
}
input[type="text"]:invalid {
}

---

etc..

plate * {
}

접시 안에 있는 모든 것

section,
h1 {
}

쉼표를 사용해서 다중 선택 가능

---

#container .mx-auto {
}

id container 안에 있는 모든 class mx-auto

#container.mx-auto {
}

id가 container이면서 class가 mx-auto

---

input[type] {
}

input 엘리먼트 중에서, type 속성을 갖는 모든 엘리먼트

---

ul li:first-child {
}

ul의 첫 번째에 있는 li

ul > li:nth-child(3) {
}

ul의 세 번째에 있는 li

ul > li:nth-last-child(3) {
}

ul의 마지막에서 세 번째에 있는 li

div > p:nth-child(2n + 1) {
}

div의 홀수번째 자식 엘리먼트가 p인 것

---

p:first-of-type {
}

형제 p 중 첫 번째

p:nth-of-type(2n + 3) {
}

세 번째 p부터 시작, 짝수번째 형제

p:nth-last-of-type(2) {
}

형제 p 중 마지막에서 두 번째

.small: only-of-type;

형제가 없는 .small

p: empty;

안이 비어있는 p

[for^=Sa]
[for$=Sa]
[for*=Sa]

for 속성의 값 Sa로 시작하는 Sa로 끝나는 Sa를 포함하는