선택자 - 2

가상 요소 선택자 - before, after

가상 클래스 선택자 -> selector:______

가상 요소 선택자 -> selector::______

가상 요소 선택자는 상태에 따라 변경이 아닌 실제로 존재하지 않는 요소를 만들거나
범위를 만들어서 그곳에 스타일을 적용한다.


.movie::before {  before element라는 가상의 요소에 스타일이 적용된다.
	color:indianred;
}

movie::after {  before와 동작은 같지만 배치는 글에 끝에 생성이 된다.
	color:indianred;
}

Selector Combinators (선택자 결합)

ul li:last-child{ 하위 요소를 전부 선택하고 싶을 때
	color: red;
}

#list > li:last-of-type{ 자식 결합 선택자
	color:red;
}

1. 일반 형제 선택자 결합(~)

code ~ p{ 주의할 점은 앞에 있는 선택자는 뒤에 있는 
				 선택자보다 무조건 요소가 위에 있어야 한다.
	color:red;
}

2. 인접 형제 선택자 결합(+)

code + p { 코드 뒤에 p가 있다면 적용

	background-color: blue;

}

범용 선택자(Universal Selector)

* { 모든 요소들에 적용이 된다.

}

상속 제어하기 - inital, inherit, unset

div {
	border: 1px solid silber;
    margin: 2px;
} 

.parent {
	color:blue;
}

.child2{ parent에 스타일에 따라 달라져야 하지만 initial로 상속을 받지 않는다 선언.
	color:initial; 
}

.parent2 * {

	all: inherit;
}

unset`

1. 부모로부터 상속받을 값이 있을 때 : inherit
2. 부모로부터 상속받을 값이 없을 때 : initial

우선순위

우선순위

1. 선언된 곳
2. 명시도 (적용범위가 적을수록 명시도가 높은 것)
3. 코드위치

!important (모든걸 무시하고 적용)
inline style >
ID >
Class/Attribute/Pseudo Class >
Type (tag) >
* >
inherited