CSS 적용 우선순위 - 선택자끼리의 비교

✨ CSS 선택자의 우선순위 비교 ✨

1️⃣ ID Selector

 

2️⃣ Class Selector, Attribute Selector, Pseudo-Class Selector

 

3️⃣ Type Selector, Pseudo-Element Selector

 

4️⃣ Universal Selector

 

 

<style>
    #special {
        color: green;
    }
</style>
<p id="special">This text is green.</p>

 

ID Selector는,

html에는 "id=special"로 쓰고 css에는 "#special"처럼 "#(샾)"기호를 써서 지칭하면 된다.

 

 

 

 

 

 

---

 

 

 

 

 

 

<style>
    .highlight {
        color: yellow;
    }
</style>
<p class="highlight">This text is yellow.</p>

 

Class Selector는,

html에는 "class=highlight"로 쓰고 css에는 ".highlight"처럼 ".(점)"기호를 써서 지칭하면 된다.

 

[type="text"] {
    color: green;
}

 

Attribute Selector는,

속성을 택하는 선택자다. 설명은 아래 코드를 참고하자.

(예시에서 input은 빼도 된다. 그러면 모든 태그에서 해당 속성을 가진 애들이 선택된다.)

 

 

 

---

 

 

a:hover {
    color: red;
    text-decoration: underline;
}

 

Pseudo-Class Selector는,

특정 state나 position의 상태에 있는 요소를 선택할 수 있다.

앞에 ":(콜론)"을 써줘야 한다. 설명은 아래 코드를 참고하자.

 

 

:first-child와 li:first-child에 대한 차이는 다음과 같다.

 

:first-child의 경우 parent의 first child이기만 하면 해당된다

 

li:first-child의 경우 li임과 동시에 first-child여야 한다. 따라서 위에 있는 Item 1은 해당되지만, 아래 있는 Paragraph 1은 first-child지만 li가 아니라서 해당 안 되고, 아래 있는 Item 1역시 li지만 first-child가 아니라서 해당이 안 된다.

 

 

 

 

 

 

---

 

 

 

 

 

 

p {
    color: black;
}

 

Type Selector는,

p, div, h1 등등 Type를 선택하는 평범한 선택자다.

 

::before {
    content: 'Before';
}

 

Pseudo-Element Selector는,

요소의 특정 부분에 스타일을 주거나 콘텐츠를 삽입하기 위해 사용한다.

앞에 "::(더블 콜론)"을 써줘야 한다. 설명은 아래 코드와 이미지를 참고하자.

 

Pseudo-Classes와 Pseudo-Elements의 차이

 

Pseudo-Class Selector는 요소가 특정 state나 position에 있으면 전체가 해당되고, Pseudo-Element Selector는 요소의 일부분만 선택하는 것.

 

 

Pseudo-Class는 이렇게 어떤 "state"에 처하거나,

 

 

어떤 "position"에 처하면 선택된다. 반면에 Pseudo-Element는,

 

 

이렇게 뭔가 요소를 삽입하거나,

 

 

요소의 일부를 선택할 때 사용된다.

 

 

 

 

 

 

---

 

 

 

 

 

 

* {
    color: yellow;
}

 

Universal Selector는,

전체를 지정할 때 선택한다. 아주 쉬움!