css - selector

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

첫 번째는 p태그이면서 p-tag 클래스이다.

두 번째는 p태그이면서 third-line 아이디이다.

라는 뜻이다.

.pre span {
  background-color: yellow;
}

모든 span이 아니라 "pre" 클래스 내부에 있는 span이라는 뜻입니다.
ex)

<div class="pre">
  <span> CSS selector </span>
</div>

이렇게 해야지 적용이 된다.

더 어렵게 하면

.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>

이렇게 된다. 이해하기 위해서 다시 잘 보는 게 좋다.