[ CSS ] 구체성

들어가기

어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결졍하기 위해

브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다.

---

📌 구체성

요소를 선택하는 데는 여러 방법이 있다.

따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있다.

 

만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까?

h1 { color:red; }
body h1 { color:green; }

두 규칙은  모두 <h1>을 선택하게 된다.

하지만 두 규칙이 지정하는 스타일은 서로 다르다.

그러면 <h1>은 어떻게 표현이 될까?

<h1>에는 color:green이 적용되는데 이는 구체성과 연관이 있다.

 

선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있다.

이 규칙을 "구체성"이라고 한다.

- 구체성

: 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로,

  구체성의 값이 클수록 우선적으로 적용이 된다.

0,0,0,0

위와 같이 구체성은 4개의 숫자 값으로 이루어져 있다.

값을 비교할 때는 좌측에 있는 값부터 비교하며, 좌측 부분의 숫자가 클수록 높은 구체성을 갖는다.

구체성은 아래의 규칙대로 계산된다.

- 1,0,0,0 : inline 스타일 ( HTML 파일에 직접 style=""로 명시하는 것 )
- 0,1,0,0 : 선택자에 있는 모든 id 속성값 ( # )
- 0,0,1,0 : 선택자에 있는 모든 class 속성값 ( . ), 기타 속성, 가상 클래스
- 0,0,0,1 : 선택자에 있는 모든 요소, 가상 요소
- 0,0,0,0 : 전체 선택자,  조합자는 구체성에 영향을 주지 않는다. ( >, + 등 )

h1 { ... }  /* 0,0,0,1 */
body h1 { ... }  /* 0,0,0,2 */
.grape { ... }  /* 0,0,1,0 */
*.bright { ... }  /* 0,0,1,0 */
p.bright em.dark { ... }  /* 0,0,2,2 */
#page { ... }  /* 0,1,0,0 */
div#page { ... }  /* 0,1,0,1 */

선택자의 구체성 값을 잘 알아야 많은 스타일 규칙들을 정의할 때 의도하지 않은 일이 생기지 않는다.

 

---

🤍 인라인 스타일

인라인 스타일로 선언된 경우에는 어떤게 우선으로 적용이 될까?

<!--
첫번째 -->
p#page { color: red; }

<!--
두번째 -->
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

첫 번째 - 0,1,0,1 의 구체성을 가지는 선택자로 스타일을 선언.

두 번째 - 요소에 직접 인라인 스타일 방식으로 선언.

결과적으로 <p>에는 color:blue가 적용된다.

인라인 스타일의 구체성 값은 1,0,0,0 이며 규칙들 중 가장 큰 구체성을 갖기 때문이다.

---

🤍 important 키워드

- important

: 별도의 구체성 값은 없지만, 모든 구체성을 무시하고 우선권을 갖는다.

  속성값 뒤 한 칸 공백을 주고 느낌표 기호와 함께 쓴다.

<!--
첫번째 -->
p#page { color: red !important; }

<!--
두번째 -->
<p id="page" style="color:blue">Lorem impusm dolor sit.</p>

위의 <p>에는 important로 인해 color:red가 적용된다.

 

---

01. https://www.boostcourse.org/구체성에 대한 설명

비전공자를 위한 HTML/CSS

    https://wook-2124.tistory.com/

[HTML/CSS] CSS - 구체성, 상속, Cascading