[CSS] Chapter 03. 선택자(Selector)_1

1. 주요 선택자 - Type, Class, ID
2. 속성 선택자 - [attr], [attr=value]
3. 속성 선택자 -[attr^], [attr$], [attr_]
4. 가상클래스 선택자 - first-child, last-child, nth-child
5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type
6. 가상클래스 선택자 - not
7. 가상클래스 선택자 - link, visited
8. 가상클래스 선택자 - hover, active, focus
9. 가상클래스 선택자 - enabled, disabled, checked
10. 가상요소 선택자 - before, after
11. 가상요소 선택자 - first-letter, first-line, selection
12. 선택자 결합 - 하위, 자식
13. 형제 선택자, 그룹화
14. 범용 선택자 (_)
15. 상속 제어하기 - initial
16. 상속 제어하기 - inherit, unset
17. 우선순위

 

1. 주요 선택자 - Type, Class, ID

/* Type Selector */
h2 {
    color: purple;
}

/* ID Selector */
#welcome-title {
    color: red;
}

/* Class Selector */
.blue {
    color: blue;
}

2. 속성 선택자 - [attr], [attr=value]

/*
Attribute Selector
 [속성 선택자]
*/

/* 1. [attr] */
/* a 태그에 target 속성이 포함되어있는 것들 */
a[target] {
    color: purple;
}

/* 2. [attr=value] */
/* a 태그에 href 속성이 해당 value인 것들 */
a[href="https://example.org"] {
    color: red;
}

/* input 태그에 type 속성이 해당 value인 것들 */
input[type="submit"] {
    background-color: green;
}

3. 속성 선택자 -[attr^], [attr$], [attr_]

/*
Attribute Selector
 [속성 선택자]
*/

/* 3. [attr^=value] */
/* a 태그에 href 속성이 value인 것으로 시작하는 것들 - prefix */
a[href^="https://"] {
    color: red;
}

/* 4. [attr$=value] */
/* a 태그에 href 속성이 value인 것으로 끝나는 것들 - suffix */
a[href$=".com"] {
    color: red;
}

/* 5. [attr*=value] */
/* a 태그에 href 속성이 value가 어디에 있던 포함하는 것들 */
a[href*="example"] {
    color: red;
}