[CSS] CSS 구체성 단위 (우선 순위)

CSS 구체성 단위 (우선 순위)

다양한 셀렉터들이 같은 요소를 가리키면 순위가 정해져야 한다. 이것을 구체성 단위라고 부르는데, 각 요소들은 정해진 점수가 있다. 그 점수가 높은 순서대로 우선 순위로 정해진다.

명시 방법	점수
TAG	1
Class	10
Id	100
HTML 태그의 style 속성 사용 (Inline Style)	1000

Inline Style
셀렉터에 Id가 많은 경우
셀렉터에 class, 속성(attribute), 가상 클래스(pseudo-class)가 많은 경우
일반적인 요소 또는 가상 요소가 많은 경우

/** 예시 **/

div.bbs_content { /* tag 1 + class 1 = 11점 */}

body > div#container > div#header {/* tag 3 + id 2 = 203점 */}

body, p, span, input, textarea {/*tag 5 = 5점*/}

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        div { color: purple;}                       /* 1점 */
        div > h1#title { color: blue; }             /* 102점 */
        div#container div.box { color: orange; }    /* 112점 */
        div#container .item { color: green; }       /* 111점 */
        #container #active { color: red; }          /* 200점 */
        div#container > ul > li { color: black; }   /* 103점 */
    </style>
</head>
<body>
    <div id="container">
        <h1 id="title">구체성단위</h1>                  <!-- blue -->
        구체성단위를 알아봅시다.                        <!-- purple -->
        <div class="box">                               <!-- orange -->
            CSS의 표현기법에 따라서 점수가 부여됩니다.
        </div>
        <ul>
            <li class="item" id="active">id: 100점</li> <!-- red -->
            <li class="item">class: 10점</li>           <!-- green -->
            <li>tag: 1점</li>                           <!-- black -->
        </ul>
    </div>
</body>
</html>

'Study > HTML & CSS' 카테고리의 다른 글

[CSS] Display (0)	2022.07.14
[SCSS] 상위 셀렉터 참조 (0)	2022.07.13
[CSS] CSS 상속 (0)	2022.07.13
[CSS] 가상 클래스 (pseudo-class) (0)	2022.07.13
[CSS] 기타 셀렉터 (0)	2022.07.12

CSS 구체성 단위 (우선 순위)

예제

'Study > HTML & CSS' 카테고리의 다른 글

티스토리툴바