[CSS] Chapter 04. 선택자(Selector)_2

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

css

닫기 줄바꿈

/*
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

css

닫기 줄바꿈

/*
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

css

닫기 줄바꿈

/*
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

css

닫기 줄바꿈

/*
Pseudo-Class Selector
 [가상 클래스 선택자]
  
 link, visited
*/

/* 방문을 했건, 하지않았건 적용 */
a {
​​​​color: red;
}

/* 방문하지 않은 것들만 적용. 방문을 하면 기본 default(보라색)으로 적용 */
a:link {
​​​​color: red;
}

/* 방문한 것들만 적용 */
a:visited {
​​​​color: red;
}

 

8. 가상클래스 선택자 - hover, active, focus

css

닫기 줄바꿈

/*
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

css

닫기 줄바꿈

/*
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

css

닫기 줄바꿈

/*
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

css

닫기 줄바꿈

/*
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;
}