200 lines
3.5 KiB
Markdown
200 lines
3.5 KiB
Markdown
# 선택자
|
|
|
|
|
|
## 타입 선택자
|
|
|
|
HTML 태그(요소)를 선택합니다.
|
|
|
|
```CSS
|
|
p {
|
|
}
|
|
```
|
|
|
|
## 전체 선택자
|
|
|
|
모든 항목을 선택합니다.
|
|
|
|
```CSS
|
|
* {
|
|
}
|
|
```
|
|
|
|
## 클래스 선택자
|
|
|
|
해당 클래스가 적용된 모든 항목을 선택합니다.
|
|
|
|
```CSS
|
|
.my-class {
|
|
}
|
|
```
|
|
|
|
## ID 선택자
|
|
|
|
해당 아이디가 적용된 항목을 선택합니다. HTML 문서에서 id는 유일해야 합니다.
|
|
|
|
```CSS
|
|
#my-id {
|
|
}
|
|
```
|
|
|
|
## 속성 선택자
|
|
|
|
```CSS
|
|
a[href] {/* 지정된 속성을 갖는 모든 요소를 선택 */}
|
|
a[attribute="value"] {/* 지정된 값과 속성의 값이 일치하는 모든 요소 */}
|
|
a[attribute~="value"] {/* 지정된 값이 공백으로 분리된 목록에 포함 */}
|
|
a[attribute|="value"] {/* 지정된 값과 일치하거나 하이픈으로 이어지는 요소 */}
|
|
a[attribute^="value"] {/* 지정된 값으로 시작하는 요소 */}
|
|
a[attribute$="value"] {/* 지정된 값으로 끝나는 요소 */}
|
|
a[attribute*="value"] {/* 지정된 값이 문자열에 포함 */}
|
|
```
|
|
|
|
### 속성 이름 선택자
|
|
|
|
해당 속성이 있는 항목을 선택합니다.
|
|
|
|
```CSS
|
|
a[title] {
|
|
}
|
|
```
|
|
|
|
### 속성 값과 일치
|
|
|
|
해당 속성의 값이 일치하는 항목을 선택합니다.
|
|
|
|
```CSS
|
|
a[href="http://examples.com"] {
|
|
}
|
|
```
|
|
|
|
해당 속성의 값과 일치하거나 공백으로 구분된 목록 중 해당 값을 포함하는 항목을 선택합니다.
|
|
|
|
```CSS
|
|
p[class~="highlight"] {
|
|
}
|
|
```
|
|
|
|
해당 속성의 값과 일치하거나 해당 값 뒤에 '-'으로 이어지는 항목을 선택합니다.
|
|
|
|
```CSS
|
|
div[lang|="ko"] {
|
|
}
|
|
```
|
|
|
|
### 문자열 중 일부와 일치
|
|
|
|
해당 속성의 값이 주어진 값으로 시작하는 항목을 선택합니다.
|
|
|
|
```CSS
|
|
div[class^="box-"] {
|
|
}
|
|
```
|
|
|
|
해당 속성의 값이 주어진 값으로 끝나는 항목을 선택합니다.
|
|
|
|
```CSS
|
|
div[class$="box-"] {
|
|
}
|
|
```
|
|
|
|
해당 속성의 값이 주어진 값을 포함하는 항목을 선택합니다.
|
|
|
|
```CSS
|
|
div[class*="box-"] {
|
|
}
|
|
```
|
|
|
|
## 의사 클래스 선택자
|
|
|
|
의사 클래스는 특정 상태에 있는 요소를 선택하는 선택자입니다.
|
|
|
|
* :first-child
|
|
* :first-of-type
|
|
* :last-child
|
|
* :last-of-type
|
|
* :nth-child()
|
|
* :nth-of-type()
|
|
* :only-child
|
|
* :only-of-type
|
|
|
|
* :active
|
|
* :hover
|
|
* :visited
|
|
* :link
|
|
* :focus
|
|
|
|
* :required
|
|
* :valid, :invalid
|
|
* :checked
|
|
* :disabled, :enabled
|
|
|
|
* :is()
|
|
* :has()
|
|
* :not()
|
|
|
|
* :root
|
|
|
|
* :playing, :paused
|
|
|
|
## 의사 요소 선택자
|
|
|
|
의사 요소는 유사한 방식으로 동작하지만, 기존 요소에 클래스를 적용하는 것이 아니라 완전히 새로운 HTML 요소를 마크업에 추가한 것처럼 작동합니다.
|
|
|
|
* ::before
|
|
* ::after
|
|
* ::first-line
|
|
* ::first-letter
|
|
* ::selection
|
|
|
|
* ::grammar-error, ::spelling-error
|
|
|
|
## 결합자
|
|
|
|
다른 결합자를 서로 연결하여 새로운 일치 조건을 만듭니다.
|
|
|
|
|
|
### 그룹
|
|
|
|
콤마로 구분된 선택자 각각을 모두 선택합니다.
|
|
|
|
```CSS
|
|
article, p {
|
|
}
|
|
```
|
|
|
|
### 자손 결합자
|
|
|
|
첫 번째 선택자와 일치하는 요소의 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.
|
|
|
|
```CSS
|
|
p .highlight {
|
|
}
|
|
```
|
|
|
|
### 자식 결합자
|
|
|
|
첫 번째 선택자와 일치하는 요소의 직접 자손 중에서 하위 선택자와 일치하는 요소를 선택합니다.
|
|
|
|
```CSS
|
|
p > .highlight {
|
|
}
|
|
```
|
|
|
|
### 인접 형제 결합자
|
|
|
|
첫 번째 선택자와 일치하는 요소의 인접 형제 노드가 하위 선택자와 일치하는 요소를 선택합니다.
|
|
|
|
```CSS
|
|
p + .highlight {
|
|
}
|
|
```
|
|
|
|
### 일반 형제 결합자
|
|
|
|
첫 번째 선택자와 일치하는 요소의 형제 중 하위 선택자와 일치하는 요소를 선택합니다.
|
|
|
|
```CSS
|
|
p ~ .highlight {
|
|
}
|
|
```
|