CSS Specificity가 무엇인가?
동일한 요소를 가리키는 CSS 규칙이 두 개 이상 있는 경우, 가장 높은 특정성(specificity) 값을 가진 선택자가 "win"되고 해당 스타일 선언이 해당 HTML 요소에 적용된다.
특정성을 요소에 최종적으로 적용할 스타일 선언을 결정하는 점수/순위로 생각한다.
다음 예를 확인합니다:
예제 1
| <!DOCTYPE html> <html> <head> <style> p {color: red;} </style> </head> <body> <p>Hello World!</p> </body> </html> |
이 예에서는 "p" 요소를 선택자로 사용하고 이 요소에 빨간색을 지정했다. 텍스트는 빨간색이다:
예제 2
이 예에서는 클래스 선택기("test"라는 이름)를 추가하고 이 클래스에 녹색을 지정했다. 이제 텍스트가 녹색으로 표시된다(요소 선택기 "p"에 빨간색을 지정했음에도 불구하고). 이는 클래스 선택기가 더 높은 우선 순위를 받기 때문이다:
| <!DOCTYPE html> <html> <head> <style> .test {color: green;} p {color: red;} </style> </head> <body> <p class="test">Hello World!</p> </body> </html> |
test 클래스와 p요소 사이에서 어떤 스타일을 지정해야 하는지 고려해야 하는데 아래 p요소에서 test 클래스를 지정하였기에 test 스타일에 글자색 초록색을 지정하여 표시되는 것이다.
위의 코드를 실행한 결과는 아래 그림과 같이 초록색으로 글자가 표시된다.
예제 3
이 예에서는 ID 선택기("demo"라는 이름)를 추가했다. ID 선택자의 우선 순위가 더 높기 때문에 이제 텍스트는 파란색이 된다:
| <!DOCTYPE html> <html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id="demo" class="test">Hello World!</p> </body> </html> |
이 예제에서는 id선택기와 test 클래스 중에 id선택자가 우선순위가 높기 때문에 글자색이 파랑색으로 아래 그림과 같이 표시된다.
예제 4
이 예에서는 "p" 요소에 대한 인라인 스타일을 추가했다. 인라인 스타일이 가장 높은 우선 순위를 지정하므로 텍스트는 분홍색이 된다:
| <!DOCTYPE html> <html> <head> <style> #demo {color: blue;} .test {color: green;} p {color: red;} </style> </head> <body> <p id="demo" class="test" style="color: pink;">Hello World!</p> </body> </html> |
CSS Specificity(특정성)에서 id 선택자보다 인라인 스타일이 더 우선순위가 높기 때문에 글자색이 핑크색으로 아래 그림과 같이 출력이 된다.
CSS specificity 계층(우선 순위)
모든 CSS 선택자는 특정 계층에 위치한다.
선택기의 특정성 수준을 정의하는 4가지 범주가 있다:
- inline 스타일 - 예: <h1 style="color: pink;">
- ID - 예: #navbar
- 클래스, 의사 클래스, 속성 선택자 - 예: .test, :hover, [href]
- 요소 및 의사 요소 - 예: h1, :: before
CSS 특정성 계산을 어떻게 하나요?
특정성을 계산하는 방법을 기억하세요!
0에서 시작하여 각 ID 값에 100을 추가하고, 각 클래스 값(또는 유사 클래스 또는 속성 선택기)에 10을 추가하고, 각 요소 선택자 또는 유사 요소에 1을 추가한다.
아래 표는 특수성 값을 계산하는 방법에 대한 몇 가지 예를 보여준다:
| 선택자 | 특정성 값 | 계산 |
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 |
| A: h1 B: h1#content C: <h1 id="content" style="color: pink;">Heading</h1> |
위의 코드와 같은 경우 특정성 값을 계산해보자
A의 특정성 값은 1의 값이다.
B의 특정성 값은 101 값이다.
C의 특정성 값은 1000 값이다.(inline 스타일)
그러므로 C가 가장 높은 특정성 값(1000)을 가지므로 스타일은 핑크색이 적용이 된다.
특정성값 규칙 예제
동일한 특정성: 최신 규칙이 승리한다. 동일한 규칙이 외부 스타일 시트에 두 번 기록되면 최신 규칙이 승리한다:
| <!DOCTYPE html> <html> <head> <style> h1 {background-color: yellow;} h1 {background-color: red;} </style> </head> <body> <h1>제목 1</h1> </body> </html> |
h1요소가 두번 정의되었는데 최신 규칙이 우선하므로 아래 '제목 1'은 배경색이 빨강색이 표시된다. 위의 코드를 실행한 결과는 아래 그림과 같다.
ID 선택자는 속성 선택자보다 특정성이 높다. 다음 세 가지 코드 라인을 확인하시오:
| <!DOCTYPE html> <html> <head> <style> div#a {background-color: green;} #a {background-color: yellow;} div[id=a] {background-color: blue;} </style> </head> <body> <div id="a">div 요소입니다.</div> </body> </html> |
div#a, #a, div[id=a] 스타일 중에 우선순위는 id선택자가 가장 우선하므로 아래 그림과 같이 div 요소에 배경색으로 초록색이 표시된다.
첫 번째 규칙은 다른 두 규칙보다 더 구체적이므로 적용됩니다.
상황에 맞는 선택자는 단일 요소 선택자보다 더 구체적이다. 내장된 스타일 시트는 스타일링할 요소에 더 가깝다. 따라서 다음과 같은 상황에서는 후자가 적용될 것이다.
| From external CSS file: #content h1 {background-color: red;} In HTML file: <style> #content h1 {background-color: yellow;} </style> |
클래스 선택자는 요소 선택자의 수에 상관없이 선택한다(예: .intro 비트 h1, p, div 등):
| <!DOCTYPE html> <html> <head> <style> .intro {background-color: yellow;} h1 {background-color: red;} </style> </head> <body> <h1 class="intro">제목</h1> </body> </html> |
클래스 선택자 .intro가 우선하므로 아래 그림과 같이 배경색이 노랑색으로 표시된다.
범용 선택기(*) 및 상속된 값의 특수성은 0 이다. 범용 선택기(*) 및 상속된 값은 무시된다!
지금까지 클래스, 요소 등의 선택자에 대한 specificity 특정성과 그에 따른 우선순위 규칙을 알아보았고 실습도 해보았다.
꼭 손으로 눈으로 머리로 실습하기를 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS Math 함수 (0) | 2023.09.14 |
|---|---|
| CSS !Important rule(중요도 규칙) (0) | 2023.09.13 |
| CSS Units (0) | 2023.09.11 |
| CSS Counter (0) | 2023.09.10 |
| CSS Website Layout (0) | 2023.09.09 |
댓글