선택자

무엇에 적용할지 가리키는 말

선택자는 규칙을 어느 요소에 적용할지 가리킵니다. 1.8 에서 붙인 id 와 class 를 여기서 사용합니다.

선택자는 CSS 만의 것이 아닙니다. JavaScript 로 요소를 찾을 때도 같은 표기를 사용하므로, 여기서 익힌 것이 그대로 쓰입니다.

기본 넷

<h2 id="top">공지사항</h2>

<ul class="list">
  <li><span class="tag">필독</span> 휴관 안내</li>
  <li><span class="tag">안내</span> 대출 방법</li>
</ul>

<p>바깥의 <span>span</span> 입니다.</p>

/* ① 태그 이름 */
li { line-height: 2; }

/* ② 아이디는 # */
#top { color: #d9480f; }

/* ③ 클래스는 점 */
.tag { color: #6e56cf; font-weight: 700; }

/* ④ 안에 든 것 — 빈칸으로 잇습니다 */
.list span { font-size: 13px; }

마지막 규칙은 .list 안에 있는 span 만 고릅니다. 그래서 아래 문단의 span 은 크기가 그대로입니다.

이어 적는 방법

빈칸이 있으면 뜻이 달라집니다. li.done 은 "done 클래스인 li" 이고, li .done 은 "li 안에 있는 done" 입니다. 빈칸 하나로 갈립니다.

자식과 형제

<ul class="menu">
  <li>처음</li>
  <li>문서
    <ul>
      <li>안내서</li>
    </ul>
  </li>
</ul>

<h3>소제목</h3>
<p>바로 뒤 문단입니다.</p>
<p>그 다음 문단입니다.</p>

/* 바로 아래 자식만 — 안쪽 목록은 바뀌지 않습니다 */
.menu > li { font-weight: 700; }

/* 바로 뒤 하나만 */
h3 + p { color: #6e56cf; }

> 를 빼고 .menu li 로 고쳐 보십시오. 안쪽 목록의 "안내서" 까지 굵어집니다.

속성 선택자

속성의 값으로도 고를 수 있습니다. 폼 요소를 다룰 때 자주 사용합니다.

input[type="text"]   { border: 1px solid #999; }
a[href^="https"]    { color: #0b7285; }  /* ^= 로 시작 */
a[href$=".pdf"]     { font-weight: 700; }  /* $= 로 끝 */

세 가지

• 클래스 앞에 점을 빠뜨립니다. tag { } 라고 적으면 tag 라는 태그를 찾습니다. 그런 태그는 없으므로 아무 일도 일어나지 않습니다.
• 빈칸을 잘못 넣습니다. li.done 과 li .done 은 다른 것을 고릅니다.
• 선택자를 너무 길게 적습니다. body div.wrap ul.menu li a 처럼 적으면 마크업이 조금만 바뀌어도 듣지 않습니다. 클래스 하나로 고를 수 있으면 그렇게 하십시오.

직접 해보기

정리

• 아이디는 #, 클래스는 ., 태그는 이름 그대로입니다.
• 빈칸은 "안에 든 것", > 는 "바로 아래 자식" 입니다.
• 붙여 적으면 둘 다인 것, 쉼표로 나열하면 여럿에 같은 규칙입니다.
• 선택자를 길게 적을수록 마크업 변화에 약해집니다.