의사 클래스와 의사 요소

마크업에 없는 것을 고르기

2.2 의 선택자는 마크업에 적힌 것을 골랐습니다. 이 단원의 둘은 마크업에 없는 것을 고릅니다.

• 의사 클래스(: 하나) — 요소의 상태를 고릅니다. 눌리는 중인가, 몇 번째인가.
• 의사 요소(:: 둘) — 요소의 일부나 없던 자리를 고릅니다. 첫 글자, 앞뒤에 끼워 넣는 자리.

둘 다 클래스를 붙이지 않고도 고를 수 있게 해 줍니다. "세 번째 항목만 다르게" 를 위해 마크업을 고칠 필요가 없습니다.

상태를 고르기

아래 미리보기의 링크와 입력 칸에 마우스를 올리거나 눌러 보십시오. 상태가 바뀌는 것이 보입니다.

<p><a href="/guide">이용 안내</a></p>
<p><input placeholder="여기를 눌러 보십시오"></p>
<p><button>단추</button></p>

a { color: #0b7285; }

/* 마우스를 올렸을 때 */
a:hover { color: #d9480f; }

/* 키보드나 마우스로 초점이 갔을 때 */
input:focus { outline: 2px solid #6e56cf; }

/* 누르고 있는 동안 */
button:active { background: #ece7fb; }

:hover 는 마우스가 있는 장치에서만 일어납니다. 손가락 으로 누르는 화면에서는 그 상태가 없거나 눌린 뒤에 남습니다. 그래서 :hover 에만 중요한 것을 담지 않습니다.

몇 번째인지로 고르기

<ul>
  <li>첫째 줄</li>
  <li>둘째 줄</li>
  <li>셋째 줄</li>
  <li>넷째 줄</li>
  <li>다섯째 줄</li>
</ul>

/* 홀수 줄에 바탕색 — 표와 목록을 읽기 쉽게 합니다 */
li:nth-child(odd) { background: #f4f2fb; }

li:first-child { font-weight: 700; }
li:last-child  { color: #686c78; }

:nth-child 는 형제 전체에서 몇 번째인가를 셉니다. li:nth-child(2) 는 "둘째 자식이면서 li 인 것" 이라, 앞에 다른 태그가 섞여 있으면 셈이 어긋납니다. 같은 태그끼리 세려면 :nth-of-type 을 사용합니다.

없던 자리를 만들기

::before 와 ::after 는 요소의 안쪽 앞뒤에 자리를 만듭니다. content 가 반드시 있어야 나옵니다.

<p class="need">이름</p>
<p class="note">주차장이 좁습니다</p>
<p class="lead">첫 글자만 크게 나옵니다. 나머지는 그대로입니다.</p>

/* 필수 표시를 마크업에 적지 않고 붙입니다 */
.need::after {
  content: " *";
  color: #d9480f;
}

.note::before { content: "참고: "; font-weight: 700; }

/* 요소의 일부를 고릅니다 */
.lead::first-letter { font-size: 28px; color: #6e56cf; }

content 로 넣은 글자는 마크업이 아닙니다. 복사되지 않고, 화면 읽기 프로그램이 읽는 방식도 브라우저마다 다릅니다. 그래서 꾸미기에만 사용하고 뜻이 있는 내용은 마크업에 적습니다.

세 가지

• content 를 빠뜨립니다. ::before 에 색과 크기만 적으면 아무것도 나오지 않습니다. 빈 자리라도 content: "" 가 있어야 합니다.
• 중요한 내용을 content 에 담습니다. 복사도 검색도 되지 않습니다. 별표 같은 표시까지가 한계입니다.
• :hover 에만 정보를 담습니다. 손가락으로 누르는 화면에는 그 상태가 없습니다. 눌러야 알 수 있는 것은 눌리기 전에도 보여야 합니다.

직접 해보기

정리

• 의사 클래스(:)는 상태를, 의사 요소(::)는 일부나 없던 자리를 고릅니다.
• :hover·:focus·:active 가 가장 많이 쓰입니다.
• :nth-child 는 형제 전체에서 몇 번째인지를 셉니다.
• ::before·::after 는 content 가 있어야 나오고, 꾸미기에만 사용합니다.