CSS :target 의사 클래스: 프래그먼트 대상

CSS :target 의사 클래스는 URL의 프래그먼트와 id 특성이 일치하는 고유 요소 (대상 요소)를 나타냅니다.

예를 들어, https://sorto.me/docs/Web/CSS/:target#구문 URL로 이동 시, :target 의사 클래스로 <h2 id="구문">구문</h2> 요소를 선택할 수 있습니다.

구문

:target {
  /* ... */
}

CSS 명세의 문제로 인해 웹 컴포넌트 내에서는 :target이 작동하지 않습니다. 섀도 루트가 대상 요소를 섀도 트리에 전달하지 않기 때문입니다.

예제

<h3>목차</h3>
<ol>
  <li><a href="#p1">서론</a></li>
  <li><a href="#p2">본론</a></li>
</ol>

<h3>프래그먼트 이동에 대하여</h3>
<p id="p1">
  이 문단은 <b>서론</b>입니다. 위의 목차에서 선택해보세요.
</p>
<p id="p2">
  이 문단은 <b>본론</b>입니다. 목차에서 선택하면 스타일이 바뀌어요.
</p>

p:target {
  background-color: gold;
}

/* 선택한 문단 왼쪽에 화살표 붙이기 */
p:target::before {
  color: limegreen;
  content: "►";
  font: 0.7em sans-serif;
  margin-right: 0.25em;
}

불러오는 중...

명세

브라우저 호환성

MDN `browser-compat-data`
	데스크톱			모바일
	데스크톱			iOS	Android
	Safari	Chrome	Firefox	Safari	Chrome	Firefox	Samsung Internet
`:target`