CSS selector

11-1. CSS selector

아래는 익숙한 css입니다.

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를 사용할 수도 있습니다.

아래 css에서 최종적으로 적용되는 selector는 span입니다.

selector가 서로 붙어있지 않고 스페이스로 띄워있다는 것을 주목해주세요!

.pre span {
  background-color: yellow;
}

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

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

엄청 길게도 작성할 수 있습니다.

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

span 태그에 적용되는 css입니다.

그런데 a클래스 밑에, div밑에, b클래스 밑에, pre클래스 밑에 span태그에 적용이 됩니다.

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

아래 내용을 해석해보면.

div .container li.first-list

<li>태그인데 "first-list" 클래스인 요소에 css를 적용한다.

그런데 <div>태그 내부의, "container"클래스 내부에 있는 요소에만 적용한다.

는 뜻입니다.

11-2. CSS Specificity

이제는 selector의 우선순위에 대해 배워보려고 합니다.

style.css에 보면 p태그와 .p-tag클래스에 모두 font-size 프로퍼티가 있습니다.

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

index.html에 보면 .p-tag 클래스를 적용한 요소가 p태그이기 때문에

font-size가 중복 적용되었네요.

브라우저에서는 30px과 15px 중에서 어떤 값을 적용할까요?

selector 표현마다 우선순위가 있습니다.

이 우선순위는 점수 계산으로 이루어집니다.

• inline styling(style 요소로 직접): 1000점
• id: 100점
• class: 10점
• tag: 1점

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

p태그에 적용된 30px은 1점

p-tag클래스에 적용된 15px는 10점이므로 15px이 적용된 것입니다.

만약 css에 아래가 추가된다면?

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

1점(p) + 10점(.p-tag) = 11점 이기 때문에 해당 요소는 100px이 적용될 것입니다.

으~~ css 할 때 이렇게 점수를 계산해가면서 해야되나?

저는 그렇게 하고 있지는 않습니다.

거의 대부분의 요소에 class를 부여해주고,

class를 selector로 styling해주기 때문에,

최대한 중복을 피할 수 있도록 작성합니다.

그리고 점수의 gap이 워낙 크기 때문에 아래의 개념정도만 알면 됩니다.

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