CSS 입문 (2) 가상 선택자 ~ Cascading

5) 가상 선택자1 ~ 2

가상클래스: 동적인 조건/상황을 미리 클래스로 정의한다.(=가상 클래스) 해당 조건/상황이 만족되었을 때 브라우저가 특정 요소에 미리 정의된 가상 클래스를 적용하도록 하는 CSS의 기능. 일반적으로 동적 처리되어야 하는 부분은 HTML + CSS 만으로 처리하기 어렵지만 자주 쓰이는 상황에 대해서는 가상클래스로 미리 구현하여 적은 비용으로 처리 가능하게 함.

‘:’ + 가상 클래스명

사용 방법: Tag명**:가상클래스명** { ~ } ex) a:first-child{color:red;}

:first-child {~}, :last-child {~}

<li> Tag 중 첫번째/마지막이 되는 요소에 적용되는 클래스 (문서 구조 관련)

:link { ~ }, :visit { ~ }

<link> Tag 중 방문한 이력이 없는/있는 요소에 적용되는 클래스 (앵커 요소 관련)

:focus

현재 입력 초점(커서)의 초점을 가진 요소에 적용~ (사용자 동작 관련)

:hover

마우스 포인터가 있는 요소에 ~ (사용자 동작 관련)

:active

사용자 입력으로 활성화된 요소에 적용~ (사용자 동작 관련)

가상요소: 특정 상황을 만족할 때 미리 정의된 위치에 요소를 삽입한다. 사용법은 가상 클래스와 동일. ‘:’ + 가상요소명

ex) p:first-line

:before 가장 앞에 요소를 삽입

:after 가장 뒤에 요소 삽입

:first-line 요소의 첫 번째 줄에 있는 텍스트

:first-letter 블록레벨 요소의 첫 번째 문자

 

6) 구체성

선택자를 얼마나 구체적으로 선언했는지를 수치화한 개념. 동일한 요소에 서로 다른 스타일이 충돌될 경우 구체성을 따져 우선순위가 높은 스타일만 적용된다.

0, 0, 0, 0 : 앞에 있는 숫자일수록 우선순위가 높다. ex) 0, 1, 0, 0 > 0, 0, 2, 2

인라인

  id

        클래스, 가상클래스, 기타 속성

              요소, 가상요소

ex) p#foo a.bar ⇒ 0, 1, 1, 2

전체 선택자는 0, 0, 0, 0

조합자는 구체성에 영향을 주지 않음.

!important: 구체성을 무시하고 우선순위 가장 높음.

 

7) 상속

스타일이 자손에게까지 적용되는 개념.

특정 속성들(ex. 박스 모델)을 제외한 대부분의 CSS 속성들은 모두 상속된다.

단, 상속되는 속성들은 구체성 자체가 없으므로 만약 충돌되는 스타일 중 구체성을 갖는 규칙이 있다면 상속은 무시되고 구체성을 갖는 속성만 적용된다.

 

8) Cascading

중요도와 출처(스타일 작성자), 구체성, 순서에 따라 우선순위가 결정됨.

중요도 & 출처 의 우선순위

1. 사용자의 !important
2. 제작자의 !important
3. 제작자 스타일
4. 사용자 스타일
5. 사용자 에이전트(ex.브라우저) 스타일

순서는 나중에 오는 것이 더 우선순위가 높다.

참고 자료

비전공자를 위한 HTML/CSS (Boostcourse)