CSS 선택자를 사용한 트릭

In CSS, selectors are patterns used to select the element(s) you want to style
w3schools

CSS 구성 요소에 대한 자세한 내용을 보려면 MDN Web Docs 및 w3.org을 참조하십시오.

범용 선택기

문서의 모든 요소를 ​​선택합니다. 선택적으로 특정 상위 요소로 제한할 수 있습니다.

* {}

유형 선택기

"section", "a", "code"등과 같은 HTML 요소를 직접 선택합니다.

p {}

클래스 선택자

class 속성이 지정된 모든 요소를 ​​선택합니다.

.classname {}

선택적으로 여러 속성class이 있는 특정 요소를 선택하는 데 사용할 수 있습니다.

.class1.class2 {}

ID 선택기

문서에서 주어진 ID에 해당하는 하나의 특정 요소를 선택합니다.

#id {}

속성 선택자

특정 속성이 지정된 모든 요소를 ​​선택합니다.

[attribute] {}
[attribute=value] {}
[attribute~=value] {}
[attribute|=value] {}
[attribute^=value] {}
[attribute$=value] {}
[attribute*=value] {}

그룹화 선택기

일치하는 모든 노드 선택기

div,
span {}

조합기

web.dev에는 복합 선택기에 대한 자세한 설명이 있습니다.

자손 연결자

첫 번째 요소의 자손 노드를 선택합니다.

div span {}

하위 연결자

첫 번째 요소의 직계 자식인 선택기 노드

div > p {}

일반 형제 연결자

첫 번째 요소 다음에 오는 두 번째 선택자의 모든 요소를 ​​선택합니다. 두 번째 요소는 첫 번째 요소 바로 뒤에 나타날 필요가 없습니다.

div ~ a {}

인접한 형제 결합자

첫 번째 선택자 바로 다음에 오는 두 번째 선택자의 모든 요소를 ​​선택합니다.

section + h2 {}

가짜

의사 클래스

상태 정보를 기반으로 요소를 선택합니다.

input:checked {}
input:indeterminate {}
input:invalid {}
input:enabled {}
input:focus {}

의사 요소

HTML에 포함되지 않은 엔터티를 선택합니다.

p::first-letter {}
p::first-line {}
p::before {}
p::after {}