• 회원가입
  • 로그인
  • 구글아이디로 로그인

[css] CSS - 선택자 명시도 계산 - (CSS 적용 선택자우선순위 판별 = CSS적용순서 체크)

목차

  1. CSS 명시도 계산법
  2. CSS 명시도 계산기
  3. CSS 명시도 예제1 - 기본 예제
  4. CSS 명시도 예제2 - 명시도 같으면, 나중에 선언된 게 우선 적용
  5. CSS 명시도 예제3 - 클래스 추가해 명시도 높여 우선 적용시키기
  6. CSS 명시도 예제4 - 명시도 (같은 vs 다른) 경우
  7. CSS 명시도 예제5 - 아이디・클래스 우선순위
  8. CSS 명시도 시험보기

 

CSS 명시도 계산법

※ 명시도 (Specificity)

 

1.
CSS 선택자 표현 방법을 숫자 4자리로 표현 후, 숫자 큰 순으로 우선순위 결정.
(예) ○○○○

2.
각 자리의 숫자 결정법

  • 천 자리 : inline (= 인라인) 스타일로 추가
  • 백 자리 : # (= 아이디 = id) 선택자 개수
  • 십 자리 : . (= 클래스 = class) 선택자 개수
  • 일 자리 : 요소 (=태그 = 엘러먼트 element) 선택자 개수

 
3.
자손선택자 경우, 좀 더 직접적인 조상을 이용해 표현하더라도
명시도 동일 시, 나중 선언된 것이 적용됨. (아래 예제 2 참고)

 

※ 보통, 내부/외부스타일로 정의하므로 보통 백~일자리 숫자 크기순으로 결정.


CSS 명시도 계산기

 

https://specificity.keegan.st/

 

 

CSS 명시도 예제1 - 기본 예제

 

ul#primary-nav li.active

 

[계산]

  • # (아이디) 개수 : 1개 = 1  (백자리)
  • . (클래스) 개수 : 1개 = 1 (십자리)
  • 요소 개수 : 2개 = 2 (일자리)

∴ 명시도 : 0112 

 

CSS 명시도 예제2 - 명시도 같으면, 나중에 선언된 게 우선 적용


<style>

p > span {color:blue;} /* 명시도 : 0002 */

div span {color:red;} /* 명시도 : 0002 */
</style>

 

<div>

  <p>

    <span>홈짱닷컴 Homzzang.com</span>

  </p>

</div>


결과보기

※ 직접 조상을 이용해 표현해도 마찬가지. ㅡㅡ;


 

<style>

div span {color:red;} /* 명시도: 0002 */

p > span {color:blue;} /* 명시도: 0002 */
</style>

 

<div>

  <p>

    <span>홈짱닷컴 Homzzang.com</span>

  </p>

</div>


결과보기

 

CSS 명시도 예제3 - 클래스 추가해 명시도 높여 우선 적용시키기


<style>

p.hz > span {color:blue;} /* 명시도: 0012 */

div span {color:red;} /* 명시도: 0002 */
</style>

 

<div>

  <p class='hz'>

    <span>홈짱닷컴 Homzzang.com</span>

  </p>

</div>


결과보기

 

CSS 명시도 예제4 - 명시도 (같은 vs 다른) 경우

[명시도가 같은 경우]

 

<style>

p.a {color:blue;}

p.b {color:red; font-weight:bold; text-decoration:underline;}

</style>

 

<p class=a> 홈짱닷컴 Homzzang.com</p>

<p class=b> 홈짱닷컴 Homzzang.com</p>

 

결과보기


[명시도가 다른 경우]

 

<style>

p.a {color:blue;} /* a 클래스 있는 p 경우 해당 속성에 한해 우선 적용 */

p {color:red; font-weight:bold; text-decoration:underline;} /* 모든 P 요소에 적용 */

</style>

 

<p class='a'> 홈짱닷컴 Homzzang.com</p>

<p> 홈짱닷컴 Homzzang.com</p>

 

결과보기

 

CSS 명시도 예제5 - 아이디・클래스 우선순위

 

<style>

p#hz {color:red;}

p.hz {color:blue}

</style>

 

<p id='hz' class='hz'>홈짱닷컴 Homzzang.com</p>

<p class='hz'>홈짱닷컴 Homzzang.com</p>

<p>홈짱닷컴 Homzzang.com</p>

 

결과보기

PS. 아이디/클래스 우선순위

 

CSS 명시도 시험보기

 

https://codepen.io/sinbi/pen/GaGVKa

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
css CSS - cursor 속성 - 커서 모양 (= cursor속성 = 커서속성)
css CSS - opacity 속성 - 불투명도 (= opacity속성 = 오패서티속성/오페서티속성) ※ 있는데 …
css CSS - 글자자르기 (= 문자열자르기 = 문자열줄이기= 글자길이자르기 = 문자열자르기 = 글자수자르기 = …
css CSS - zoom 속성 - 요소 확대 (= zoom속성 = 줌속성) ※ IE 하위 브라우저(예: IE6, …
css CSS - 블럭요소 수직중앙정렬/수평중앙정렬 (= 가로가운데정렬) (IE9) ★★★★★ (HT - Cent…
css CSS - appearance 속성 - 요소자체구성요소숨기기 (= 요소내장구성요소제거 = appearance…
css CSS - (div전체/TD전체/TD셀천체/LI전체)에 링크걸기 (= DIV링크/TD링크/LI링크 = 요소전…
css CSS - Smooth Scroll (부드러운 스크롤 = 부드럽게이동) ※ 클릭 상하 이동
css CSS - 선택자 명시도 계산 - (CSS 적용 선택자우선순위 판별 = CSS적용순서 체크)
css CSS - 폰트오썸 아이콘 배경이미지 적용 + fontawesome 엑박원인 엑박해결
css CSS - 부모요소 안 자식요소 너비를 부모요소 밖으로 화면너비 100% 채우기. (= 부모이탈자식너비전체설…
css CSS - (블럭요소 + 인라인요소:이미지/텍스트) 중앙정렬/가운데정렬 원리/방법
css CSS - FADE-IN TEXT - 페이드인 텍스트 (= 서서히 사라지는 이미지 + 서서히 나타나는 글자)
css CSS - 반응형 마름모 갤러리 (Responsible Rhomb gallery on grids + clip…
css CSS - 스크롤 따라다니는 양사이드배너 (= 양쪽날개배너 = 사이드고정배너) 3단 레이아웃
css CSS - 이미지반전 (= 이미지좌우반전 = 이미지좌우대칭변환)
css CSS - 인풋태그 높이통일 (= 동일높이 = 높이동일 = 높이같게 = 세로길이 똑같게 = 높이맞추기) IN…
css CSS - 네임펜 (= 형광펜) 효과
css CSS - IE 전용 CSS핵
css CSS - 화면 비율 유지. (= 요소 종횡비 유지 = 반응형 레이아웃 사이즈/크기)
1/5
목록
찾아주셔서 감사합니다. Since 2012