CSS - 10. CSS selector

1. CSS selector

selector표현과 우선순위.

[기본 표현방법]

p {
  font-size: 20px;
}
.p-tag {
  color: gray;
}
#third-line {
  text-decoration: underline;
}

[class나 id가 selector일 때, 태그와 결합하는 방법]

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}

첫 번째는 p태그이면서 p-tag 클래스이고, 두 번째는 p태그이면서 third-line 아이디이다.

물론 p#third-line.p-tag 이런 조합도 가능하지만, third-line라는 아이디는 오직 한 개이므로 tag+id+class의 조합은 과한 표현이다.

 

또한 여러 selector를 사용할 수도 있다.

.pre span {
  background-color: yellow;
}

<div class="pre">
  <span>이건 노란색 배경이고</span>
</div>
<div class="main">
  <span>이건 아님!</span>
</div>
<span class="pre">이것도 아님</span>
<div>
  <p class="pre">
    <span>이건 적용됩니다! 노란색배경!</span>
  </p>
</div>

이 코드에서 최종적으로 적용되는 selector는 span이다. selector가 서로 붙어있지 않고 스페이스로 띄워있다는 것에 집중할 필요가 있는데,

여기서 span은 모든 span이 아니라 'pre'클래스 내부에 있는 span이라는 뜻이다. 

 

적용은 제한을 두지 않고 아래 코드처럼 길게도 가능하다.

.a div .b .pre span {
  background-color: yellow;
}

<div class="a">
  <div>
    <header class="b">
      <h1 class="pre">
        <span>제목! 노란색 배경 나옴!</span>
        <span class="title">이것도 나옴!</span>
      </h1>
      <span>이건 적용안 됨</span>
    </header>
  </div>
  <span>이건 적용안 됨</span>
</div>

a클래스 밑에, div 밑에, b클래스 밑에, pre클래스 밑에, span태그에 적용되는걸 알 수 있다.

 

---

2. CSS Specificity

selector의 우선순위.

p {
  font-size: 30px;
}
.p-tag {
  font-size: 15px;
}

p태그와 .p-tag클래스에 모두 font-size 프로퍼티가 있고 font-size가 중복 적용되어있다.

selector 표현마다 우선순위가 있다. 이 우선순위는 점수 계산으로 이루어진다.

inline styling(13줄에 style 요소로 직접): 1000점 / id: 100점 / class: 10점 / tag: 1점

<p class="p-tag">나는 p태그, class가 있다</p>

p태그(1점)보다. p-tag 클래스(10점)의 점수가 더 높으니. p-tag클래스가 적용된다.

 

만약

p.p-tag {
  font-size: 100px;
}

이렇게 쓸 경우 p(1점) + .p-tag(10점) = 11점 이기 때문에 p.p-tag가 적용될 것이다.

매번 쓸때마다 계산을 할 필요는 없고 css를 쓸 때, 대부분의 요소에 class를 부여해주고, class를 selector로 styling 해주기 때문에, 최대한 중복을 피할 수 있도록 작성을 하면 된다. 그리고 점수의 차이가 워낙 크기 때문에 아래의 개념 정도만 알고 있으면 된다.

tag <<<<<< class <<<<<< id <<<<<< inline css