CSS selector

그룹(Grouping)

여러 요소에 한번에 같은 스타일 적용하고 싶을 때 쉼표를 사용하여 나열한다.

.what-is-blockquote, span, .title {
  color: green;
}

조합

1. 부모-자식 간의 관계는 한 칸 띄어쓰기가 필요하며, 가장 마지막에 위치한 요소에 스타일이 적용된다.

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

위의 css가 적용될 수 있는 html을 작성해보면 아래와 같다.

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

2. 하나의 요소에서 태그, 클래스, id의 조합으로 작성할 때는 띄워 쓰지 않는다.

p#p-tag {
  color: gray;

위의 예제는 p 태그 이면서 p-tag 아이디를 갖는 요소에 css가 적용된다는 의미이다. p태그와 p-tag 아이디는 서로 부모-자식 관계가 아니며 html 상에서 아래와 같은 형태를 띤다.

<p id="p-tag">p태그 이면서 p-tag 아이디 가짐</p>

CSS 적용 우선순위

selector 표현마다 우선순위가 있는데 점수 계산으로 생각하면 쉽게 받아들일 수 있다.
- inline styling: 1000점
- id: 100점
- class: 10점
- tag: 1점

p {
  color: black;      // 1점
}

.have-class {
  color: red;        // 10점
}

p.have-class {
  color: green;      // 11점
}

위의 스타일을 적용했을 때 출력되는 결과는 아래와 같다.

<p>여기는 p태그</p>                                 // black
<span class="have-class">여기는 span태그</span>     // red
<p class="have-class">p태그인데 class도 있어</p>     // green

점수 계산을 하고싶지 않다면, 아래와 같이 생각해도 좋다.
tag << class <<<< id <<<<<<< inline css