[CSS] CSS Selector 선택자 우선순위

  CSS Selector 선택자 우선순위

1. CSS 같은 속성 여러번 설정한 경우 

<h1>메모를 메모하다</h1>
<style>
  h1 {
      background-color : orange;
  }

  h1 {
      background-color: blue;
  }
</style>

정답 : 메모를 메모하다

소스의 흐름대로 적용 된다.

처음엔 orange였다가 하위 코드로 인해 blue 로 바뀐다.

 

2-1. 다른 셀렉터를 통한 설정 (* vs 태그명)

<h1>메모를 메모하다</h1>
<style>
  h1 { 
      background-color: orange;
  }

  * {
      background-color : blue;
  }
</style>

정답 : 메모를 메모하다

더 구체적인 셀렉터에서 설정한 값이 우선된다.

 

2-2. 다른 셀렉터를 통한 설정 (태그명 vs 클래스명)

<h1 class="test-class">메모를 메모하다</h1>
<style>
  h1 { 
      background-color: orange;
  }

  .test-class {
      background-color : blue;
  }
</style>

정답 : 메모를 메모하다

더 구체적인 셀렉터에서 설정한 값이 우선된다.

(태그보다는 클래스가 더 구체적)

 

2-3. 다른 셀렉터를 통한 설정 (태그명.클래스명 vs 클래스명)

<h1 class="test-class">메모를 메모하다</h1>
<style>
  h1.test-class {
      background-color : blue;
  }

  .text-class {
      background-color : green;
  }
</style>

정답 : 메모를 메모하다

.test-class 앞에 전체를 의미하는 *가 생략이 되어있는 형태이다.

다시말해, h1.test-class vs *.test-class가 되는데

h1.test-class 가 조금더 구체적이기 때문에 블루가 설정이 된다.

 

3. 클래스명 vs 클래스명

<h1 class="test-class test-class2">메모를 메모하다</h1>
<style>
  .test-class {
      background-color : red;
  }

  .test-class2 {
      background-color : green;
  }
</style>

정답 : 메모를 메모하다

클래스가 다르다고해서 소스의 흐름이 바뀌지 않는다.

같은 대상의 클래스 두개이기 때문에 뒤에서 설정한 그린이 설정된다.

 

4. .클래스명.클래스명 vs 클래스명

<h1 class="test-class test-class2">메모를 메모하다</h1>
<style>
  .test-class.test-class2 {
      background-color : green;
  }

  .test-class {
      background-color : blue;
  }
</style>

정답 : 메모를 메모하다

클래스명 두개를 사용한 것이 조금더 구체적이기 때문에

그린이 설정된다.

 

5. 아이디 vs 클래스

<h1 id="test" class="test-class">메모를 메모하다</h1>
  <style>
  #test {
      background-color: green;
  }

  .test-class {
      background-color : red;
  }
</style>

정답 : 메모를 메모하다

아이디는 고유 값이기 때문에 아이디가 클래스보다 우선순위가 높다. 

 

6. 아이디 vs 아이디:가상클래스(이벤트)

<h1 id="test">메모를 메모하다</h1>
<style>
  #test:hover {
      background-color : blue;
  }

  #test {
      background-color : green;
  }
</style>

정답 : 메모를메모하다 (마우스오버시)

아이디 + 가상클래스가 더 구체적이기에 

이벤트에 해당시 블루가 적용된다.

 

7. 아이디 vs 클래스:가상클래스(이벤트)

<h1 id="test" class="test-class">메모를 메모하다</h1>
<style>
  #test {
      background-color : blue;
  }

  .test-class:hover {
      background-color : green;
  }
</style>

정답 : 메모를 메모하다 (마우스 오버시에도)

클래스 + 가상클래스 보다 아이디가 우선순위가 더 높기 때문에

마우스 오버시에도 색상은 변하지 않는다.

 

8. 아이디 vs 클래스:가상클래스(이벤트) !important

<h1 id="test" class="test-class">메모를 메모하다</h1>
<style>
  #test {
      background-color : blue;
  }

  .test-class:hover {
      background-color : green !important;
  }
</style>

정답 : 메모를 메모하다 (마우스오버시)

!important가 적용된 속성값은 가장 우선하라는 의미이므로

마우스 오버시 그린이 설정된다.

(비추.. 코드의 위계질서가 무너진다.. 차라리 해당 부분의 선택자를 리팩토링하자)

 

9. 클래스 vs 태그의 스타일 속성을 이용한 입력

<h1 class="test-class" style="background-color:green;">메모를 메모하다</h1>
<style>
    .test-class {
        background-color : blue;
    }
</style>

정답 : 메모를 메모하다 

클래스보다 태그에 직접 style 속성을 이용하여 

설정한 값이 우선한다.

 

10. 아이디 vs 태그의 스타일 속성을 이용한 입력

<h1 id="test" style="background-color:green;">메모를 메모하다</h1>
<style>
    #test {
        background-color : blue;
    }
</style>

정답 : 메모를 메모하다

아이디보다 태그에 직접 style 속성을 이용하여

설정한 값이 우선한다.

 

11. !important vs !important

<h1 class="test1 test2">메모를 메모하다</h1>
<style>
    .test1 {
        background-color : blue !important;
    }
    .test2 {
        background-color : green !important;
    }
</style>

정답 : 메모를 메모하다

같은 !important끼리는 후에 설정한 important의 green이 설정된다.