[css] 가상 선택자, 구체성, cascading

가상 선택자

가상 선택자에는 가상 클래스와 가상 요소가 있습니다.

먼저 가상 클래스는 미리 정의해둔 상황에 적용되도록 약속된 보이지 않는 클래스입니다.

(가상 클래스)

1. 문서 구조와 관련

:first-child : 첫 번째 자식 요소 선택

:last-child : 마지막 자식 요소 선택

li:first-child { 
	color: purple; 
}
li:last-child { 
	color: gray; 
}

---

2. 앵커 요소와 관련

:link : 하이퍼 링크이면서 아직 방문하지 않은 앵커 (보통 파란색)

:visited : 방문한 하이퍼링크를 의미 (보통 보라색)

a:link { 
	color: blue; 
}
a:visited { 
	color: purple; 
}

---

3. 사용자 동작과 관련

:focus: 현재 입력 초점을 가진 요소에 적용 (tab을 통해 확인 가능)

:hover: 마우스 포인터가 있는 요소에 적용 (클릭 없이 올리기만 하면 적용)

:active: 사용자 입력으로 활성화된 요소에 적용 (클릭시 아주 잠깐)

button:focus { 
	background-color: yellow; 
}
button:hover { 
	font-weight: 800; 
}
button:active { 
	color: red; 
    font-weight: 900; 
}

---

(가상 요소)

:before : 가장 앞에 요소를 삽입

:after : 가장 뒤에 요소를 삽입

:first-line : 요소의 첫 번째 줄에 있는 텍스트를 감쌈 (적용)

:first-letter : 블록 레벨 요소의 첫 번째 문자를 감쌈 (적용)

p::before { 
	content: "start of text" 
}
p::after { 
	content: "end of text" 
}
p::first-line { 
	background-color: yellow;
}
p::first-letter { 
	font-size: 30px;
}

 

구체성

•  0, 1, 0, 0 : 선택자에 있는 모든 id 속성값
•  0, 0, 1, 0 : 선택자에 있는 모든 class 속성값, 기타 속성, 가상 클래스
•  0, 0, 0, 1 : 선택자에 있는 모든 요소, 가상 요소
•  전체 선택자는 0, 0, 0, 0을 가진다.
•  조합자는 구체성에 영향을 주지 않는다. (>, + 등)
•  인라인 스타일의 구체성 값은 1, 0, 0, 0이며 규칙 중 가장 큰 구체성을 가진다.
•  important는 모든 구체성을 무시하고 우선순위를 가진다. ex !important

 

cascading

1. 스타일 규칙들을 모아서 중요도가 명시적으로 선언되었는지에 따라 분류한다.
1. 중요도가 명시적으로 선언된 규칙들은 그렇지 않은 규칙들보다 우선한다.
2. 중요도가 있는 규칙들끼리는 아래 다른 규칙들을 적용받는다.
2. 스타일 규칙들을 출처에 따라 분류한다.
1. 제작자 스타일 규칙이 사용자 에이전트 스타일 규칙보다 우선이다.
3. 스타일 규칙들을 구체성에 따라 분류니다.
1. 구체성이 높은 규칙들이 우선이다.
4. 스타일 규칙들을 선언 순서에 따라 분류합니다.
1. 뒤에 선언된 규칙일수록 우선합니다. (cascading = 폭포(처럼 흐르다))

 

 

By. boostcourse 웹 UI 개발 강좌