셀렉터의 구체성으로 알아보는 css의 우선순위

순수 html, css, javascript로 홈페이지를 만들던 중 전체 셀렉터(*)에 의해 특정 요소의 폰트 스타일이 지정되지 않는 문제가 발생했다. 해결 과정은 다음과 같다.

---

다음과 같이 루트 css파일을 작성했다.

/* index.css */
@import './css/header.css';

* {
  margin: 0;
  padding: 0;
  font-family: 'Nanum Gothic', sans-serif;
}

폰트를 반영하고자 하는 요소가 있는 header.html의 dom 구조는 다음과 같다.

<header>
  <div class="inner">
    <a href="../index.html"><img src="../webres-starbucks/images/starbucks_logo.png" alt="logo"></a>
    <nav class="top-right">
      <ul>
        <li><a href="javascript:void(0)">Sign In</a></li>
        <li><a href="javascript:void(0)">My Starbucks</a></li>
        <li><a href="javascript:void(0)">Customer Service & Ideas</a></li>
        <li><a href="javascript:void(0)">Find a Store</a></li>
      </ul>
      
      ...

여기 있는 ul > li > a에 폰트를 달리 적용하고 싶어 다음과 같이 header > .inner에 font-family 속성을 지정했으나 적용되지 않았다. 이유는 index.css에 있는 전체 셀렉터(*) 때문이었다. font-family 속성이 자식 요소로 상속되기는 하나, 전체 셀렉터가 세부 요소 각각에 Nanum Gothic이라는 폰트를 적용했기 때문에 이것이 우선시되었기 때문이었다.

이를 해결하기 위해 다음과 같이 css를 지정했더니 폰트가 정상적으로 적용되었다.

/* header.css */
header>.inner>.top-right>ul>li>a{
  display: inline-block;
  padding: 11px 16px;
  text-decoration: none;
  color: rgb(101, 101, 101);
  font-family: Arial, sans-serif;
  font-size: 13px;
}

이렇게 a에 직접 font-family 속성을 명시하면 이때는 상속에 의한 스타일 지정이 아니게 되고, 셀렉터의 구체성이 높아 index.css에서 *를 통한 스타일 지정을 나중에 했다고 하더라도 위의 스타일이 적용되게 된다.

---

결론

css에서는 구체성이 높은 선택자가 우선시되고, 구체성이 같은 경우 나중에 적용된 스타일이 우선시된다. 구체성을 결정하는 기준은 id, class 등 여러가지가 있으나 찬찬히 알아가도록 하자.