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. 우선순위
4. 가상클래스 선택자 - first-child, last-child, nth-child
/*
Pseudo-Class Selector
[가상 클래스 선택자]
*/
/* 1. first-child */
li:first-child {
color: red;
}
/* 클래스도 가능 */
.movie:first-child {
font-size: 32px;
}
/* 2. last-child */
span:last-child {
color: red;
}
/* 3. nth-child */
li:nth-child(5) {
color: red;
}
/* 2의 배수 */
li:nth-child(2n) {
color: red;
}
li:nth-child(2n - 1) {
color: red;
}
/* 홀수 */
li:nth-child(odd) {
color: red;
}
- .movie:first-child 에서 유념해야 될 게 movie란 클래스에서 첫 번째 자식이 아닌, 정확하게 selector에 의해서 선택된 것들의 첫 번째 자식이다. (형제들 중 첫 번째 자식)
- li 5개 중 첫 번째를 제외한 4개에 movie란 클래스로 정의되어 있다면, 그 부모인 ul에서 첫 번째 자식이 적용되는 것이다. 첫 번째 자식이 movie란 클래스로 정의되어 있다면, css가 적용될 것이고 안되어있다면 적용이 안된다.
5. 가상클래스 선택자 - first-of-type, last-of-type, nth-of-type
/*
Pseudo-Class Selector
[가상 클래스 선택자]
first-child VS first-of-type
*/
/* 1. :first-of-type */
/*
first-child 형제들 중 첫 번째 자식
first-of-type은 타입들(현재 코드는 tag) 중 첫 번째
*/
p:first-of-type {
color: red;
}
/* 2. :last-of-type */
p:last-of-type {
color: red;
}
/* 3. :nth-of-type */
p:nth-of-type(even) {
color: red;
}
- 의도에 따라 first-child와 first-of-type을 가려서 쓰면 될 것 같고, 휴먼에러를 방지하려면 보편적으로 first-of-type을 쓰는 것이 낫다.
- 만약 div와 p에 같은 클래스로 설정되어 있고, 그 클래스에 first-of-type으로 색깔을 변경했다면, 둘 다 각 태그의 첫 번째이므로 둘 다 css가 적용된다. first-child일 경우는 첫 번째 자식만 적용될 것이다.
6. 가상클래스 선택자 - not
/*
Pseudo-Class Selector
[가상 클래스 선택자]
:not()
*/
/*
selector:not(selector)
반대 조건에 해당하는 것들만 적용
*/
input:not(.pw) {
color: red;
}
/* attribute(속성) selector도 대괄호를 통해 사용 가능 */
input:not([type=passward]) {
color: red;
}
/* placeholder가 없는 것들만 적용 */
input:not([placeholder]) {
color: red;
}
7. 가상클래스 선택자 - link, visited
/*
Pseudo-Class Selector
[가상 클래스 선택자]
link, visited
*/
/* 방문을 했건, 하지않았건 적용 */
a {
color: red;
}
/* 방문하지 않은 것들만 적용. 방문을 하면 기본 default(보라색)으로 적용 */
a:link {
color: red;
}
/* 방문한 것들만 적용 */
a:visited {
color: red;
}
8. 가상클래스 선택자 - hover, active, focus
/*
Pseudo-Class Selector
[가상 클래스 선택자]
hover, active, focus
*/
/* 버튼에 마우스가 올라갔을 때, 적용 */
input[type=button]:hover {
color: red;
}
/* 버튼을 누르는 동안 */
input[type=button]:active {
color: red;
}
/* 버튼에 포커싱이 맞춰졌을 때, 적용 */
input[type=button]:focus {
color: red;
}
input[type=text]:focus {
color: red;
}
9. 가상클래스 선택자 - enabled, disabled, checked
/*
Pseudo-Class Selector
[가상 클래스 선택자]
enabled, disabled, checked
*/
/* 활성화되어있는 요소만 적용 */
input[type=text]:enabled {
color: red;
}
/* 비활성화되어있는 요소만 적용 */
input[type=text]:disabled {
color: red;
}
/* 체크되어있는 요소만 적용 */
input[type=radio]:checked {
color: red;
}
10. 가상요소 선택자 - before, after
/*
Pseudo-Element Selector
[가상 요소 선택자]
before, after
*/
/*
Pseudo-Class Selector (가상 클래스 선택자)
-> selector:____
실제로 존재하지 않은 상태에 이름을 붙여줌(첫 번째 자식이나 방문했던 링크 등)
아직 클래스가 없지만, 있는 것처럼 이름을 붙여줬다고 해서 가상 클래스 선택자.
Pseudo-Element Selector (가상 요소 선택자)
-> selector::____
상태에 따라서 스타일을 적용하는 게 아니라
실제로 존재하지 않은 요소를 만들거나 범위를 만들어서 스타일을 적용시킴.
*/
.movie::before {
content: 'movie';
color: red;
}
11. 가상요소 선택자 - first-letter, first-line, selection
/*
Pseudo-Element Selector
[가상 요소 선택자]
first-letter, first-line, selection
*/
/* 각 문장의 첫 번째 글자에 대해 적용 */
.movie::first-letter {
content: 'movie';
color: red;
}
/* 개행이 된 모든 문장의 첫 번째 줄에 대해 적용 */
.movie::first-line {
content: 'movie';
color: red;
}
/* 선택 영역에 대한 스타일을 변경할 때, 사용 */
.movie::selection {
content: 'movie';
color: red;
}
댓글