CSS에서 링크 상태를 사용한 복잡한 선택자

이전에 배운 모든 복잡한 선택자는 링크에도 적용할 수 있습니다.

예제를 통해 살펴봅시다. 링크들이 특정한 id를 가진 블록 안에 있다고 가정해 보겠습니다:

html<div id="block">
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
</div>

이 블록 안의 링크에 스타일을 지정해 보겠습니다:

css#block a:link, #block a:visited {
  color: red;
}
#block a:hover {
  text-decoration: none;
}

일반적으로 link 상태와 visited 상태는 구분하지 않으므로, 코드를 다음과 같이 간소화할 수 있습니다:

css#block a {
  color: red;
}
#block a:hover {
  text-decoration: none;
}

css#test a {
  color: red;
}
#test a:hover {
  text-decoration: none;
}