[CSS] Chapter 05. 선택자(Selector)_3

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. 우선순위

 

12. 선택자 결합 - 하위, 자식

/*
Selector Combinators
 [선택자 결합]
  
 하위, 자식, 형제 선택자, 그룹화
*/

/* 하위 */
ul li:last-of-type {
    color: red;
}
#list li:last-of-type {
    color: red;
}

/* 자식 */
/* 하위의 하위를 전부 찾는게 아니라, 앞 쪽에 있는 선택자의 바로 밑에 있는 하위 선택자 */
#list > li:last-of-type {
    color: red;
}

13. 형제 선택자, 그룹화

/*
Selector Combinators
 [선택자 결합]
  
 하위( ), 자식(>), 형제 선택자, 그룹화
*/

/* 1. 일반 형제 선택자 결합 (~) */
/* 형제 중에서 span에서 selector까지 적용. 1개만 해당하는 게 아니라 복수 적용 */
span ~ p {
    color: red;
}

/* 2. 인접 형제 선택자 결합 */
/* span 바로 뒤에 selector가 인접해있다면 적용 */
span + p {
    color: red;
}

/* 3. 그룹화 */
p, span {
    color: red;
}

14. 범용 선택자 (_)

/*
 범용 선택자 (Universal Selector)
*/

/* 전체 선택자 */
* {
    color: red;
}

/* 인접 형제 선택자 등 다른 선택자와 결합도 가능  */
p + * {
    color: red;
}

15. 상속 제어하기 - initial

/*
 상속 제어하기 - initial, inherit, unset
*/

.parent {
    color: red;
}

/*
 css 속성중에서 color, font-size 등 설정이 안되어 있다면 부모의 속성을 따라간다.
 그럴 경우, initial을 통해 상속을 끊어서 브라우저의 기본값으로 설정되게 할 수 있다.
 all: initial로 모든 속성을 끊을 수도 있다.
*/
.child {
    color: initial;
}

 

16. 상속 제어하기 - inherit, unset

/*
 상속 제어하기 - initial, inherit, unset
*/

/* parent의 자식 모두 다 선택 */
/* inherit는 자식이 css 정의를 해봤자, 무시하고 무조건 부모의 값을 따르게 설정 */
.parent * {
    color: inherit;
}

/*
 unset
 
 1. 부모로부터 상속받을 값이 있을 때 : inherit
 2. 부모로부터 상속받을 값이 없을 때 : initial
 
 언제 사용하냐?
 여러가지 css 파일을 임포트했을 때, 뭐가 적용된건지 헷갈릴 수 있다.
 그래서 초기에 unset으로 초기화를 한 번 해주고, 
 자신이 가지고있는 부모것만 받아서 재정의하도록 사용할 수 있다.
*/

17. 우선순위

/*
 우선순위
 
 1. 선언된 곳
 2. 명시도 (적용범위가 적을수록 명시도가 높은 것)
    - 태그보다는 클래스고 클래스보다는 id가 더 명확해서 높다.
    - !important > inline style > ID > Class/Attribute/Pseudo Class > Type(tag) > * > inherited
 3. 코드 위치
    - 좀 더 나중에 선언된 것들
*/