선택자의 세 번째 글에서는 의사(pseudo) 선택자를 다루겠습니다. 의사 선택자는 요소를 그냥 선택하지 않고, 요소의 일정 부분만 혹은 특정 상황에 처한 요소만 선택합니다. 의사 클래스의사 요소의 두 종류가 있습니다.

의사 클래스

CSS 의사 클래스는 선택자 뒤에 추가하는 키워드로 맨 앞에 콜론(:)을 붙입니다. 의사 클래스는 선택자로 선택한 요소가 특정 상황에 처해있어야 규칙을 적용하고 싶을 때 사용합니다. 예를 들면 마우스 포인터를 갖다 댄 링크 요소나, 활성화/비활성화한 체크박스, 어떤 부모의 DOM 트리 첫 번째 자식 등이 있습니다.

모든걸 최대한의 설명과 함께 가르치는 건 학습서의 목적이 아니기 때문에, 이후 적절한 상황이라면 어떤 의사 클래스는 마주치겠지만 여기서 전부를 알아보진 않겠습니다.

의사 클래스 예제

지금으로썬 어떻게 쓰는지 간단하게만 알아보겠습니다. 우선 HTML입니다.

<a href="https://developer.mozilla.org/" target="_blank">Mozilla Developer Network</a>

다음은 CSS 규칙입니다.

/* 모든 상태의 링크에 적용 */
a {
  color: blue;
  font-weight: bold;
}

/* 방문한 링크와 방문하지 않은 링크에 같은 색 */
a:visited {
  color: blue;
}

/* 링크를 호버(마우스)하거나, 활성화 또는 선택(키보드)할 경우 강조 */
a:hover,
a:active,
a:focus {
  color: darkred;
  text-decoration: none;
}

이제 우리 링크좀 봐야겠죠?

실습: 줄무늬 목록

다시 여러분 차례입니다. 이번 실습에서 여러분은 정보 목록을 줄무늬로 만들고, 적절한 의사 클래스를 통해 마우스 호버 시 다른 스타일을 적용해야 합니다. 마지막 세 규칙만 수정하면 됩니다. 힌트를 드리겠습니다.

  1. 마우스 호버 스타일을 위한 의사 클래스 작성법은 이미 살펴봤습니다.
  2. 줄무늬 목록은 짝수와 홀수번째 항목에 다른 배경색 규칙을 적용해야 하니 :nth-of-type()과 같은 의사 클래스를 사용해야 합니다. 어떻게 하는지 찾아보세요!

잘못 입력한 경우 초기화 버튼을 사용하여 언제든지 처음으로 돌아갈 수 있습니다. 정말 막혔다면 답안 보기 버튼을 사용해 가능한 답안 중 한 가지를 확인하세요.

의사 요소

의사 요소는 의사 클래스와 거의 똑같지만 다른 점도 있습니다. 이번엔 키워드 앞에 콜론을 두 개(::) 붙여야 하며, 선택자와 일치하는 요소의 특정 부분을 선택합니다.

모두 특유의 행동과 재밌는 기능을 가지고 있지만 모두 살펴보는 건 지금으로서는 하지 않겠습니다.

의사 요소 예제

절대경로를 가진 링크의 마지막을 선택해 화살표를 집어넣는 간단한 예제입니다.

<ul>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS">CSS</a> defined in the MDN glossary.</li>
  <li><a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a> defined in the MDN glossary.</li>
</ul>

이제 CSS 규칙입니다.

/* "href" 속성의 값이 "http"로 시작하면
   맨 끝에 외부 링크라는걸 알려주는 화살표를 추가 */
[href^=http]::after {
  content: '⤴';
}

결과입니다.

실습: 멋쟁이 문단

이번 실습에서 꾸며볼 멋진 문단을 준비했어요! 해야할 일은 두 개의 규칙 세트를 ::first-line와 ::first-letter 의사 요소를 사용해 문단 첫째 줄과 첫째 문자에 적용하는 것 뿐입니다. 결과물은 첫째 줄을 굵게, 첫 문자를 적절히 강조해 옛날 느낌을 줄겁니다.

잘못 입력한 경우 초기화 버튼을 사용하여 언제든지 처음으로 돌아갈 수 있습니다. 정말 막혔다면 답안 보기 버튼을 사용해 가능한 답안 중 한 가지를 확인하세요.

다음으로

결합자와 다중 선택자를 끝으로 CSS 선택자를 마무리 짓겠습니다.

문서 태그 및 공헌자

이 페이지의 공헌자: urty5656, youknow.yoonho
최종 변경자: urty5656,