CSS selector

1. class나 id가 선택자(selector)일 경우, 태그와 결합 가능

p.p-tag {
  color: gray;
}

위의 예는<p>태그와 p-tag클래스를 결합하여 사용한 것입니다.
이렇게 사용하면 <p>태그이면서 p-tag 클래스가 됩니다.
아래처럼 id와도 결합이 가능합니다.

p#third-line {
  text-decoration: underline;
}

이것은 어떻게 해석할까요?

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

위의 예는 a클래스 밑에, <div> 태그밑에, b클래스 밑에, pre클래스 밑에 <span>태그에 적용이 됩니다. 즉 아래와 같습니다.

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

2. 우선 순위

아래와 같이 <p>태그와 .p-tag클래스에 font-size가 서로 다른 값을 주고 동시에 적용하면 어떻게 될까요?

p {
  font-size: 30px;
}

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

선택자 표현마다 점수를 부여하여 가장 높은 점수인것을 적용하게 됩니다.

• inline styling: 1000점
• id: 100점
• class: 10점
• tag: 1점

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

이렇게 되어 있다면,
<p>태그는 1점이고,
p-tag클래스는 10점이므로

결국 p-tag클래스의 15px가 font-size로 적용됩니다.