12. CSS selector

1. CSS selector

이번엔 selector의 표현과 우선순위에 대해서 알아보겠습니다.

 

아래는 앞 내용을 아신다면 다 아시는 css입니다.

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

class나 id가 selector일때 태그와 결합할 수 있습니다.

첫 번째는 p태그이면서 p-tag 클래스이다.
p.p-tag {
  color: gray;
}

두 번째는 p태그이면서 third-line 아이디이다.
p#third-line {
  text-decoration: underline;
}

여러 selector를 사용할 수도 있습니다.

 

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

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

.pre span {
  background-color: yellow;
}

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

 

코드를 보자면

<div class="pre">
	<span>내 안에 있다</span>
</div>

위 와 같인 구조로 되어있는것 입니다.

 

다른 경우도 볼까요 ?

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

위 코드는 어떤 경우 일까요 ?

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

위와 같이 복잡하게도 가능합니다 !