CSS :target 가상 클래스 선택자 – URL의 프래그먼트와 일치하는 요소 선택

정의 및 사용 방법

:target 가상 클래스 선택자는
현재 페이지 URL에서 # 뒤에 붙은 주소(프래그먼트 식별자)와 일치하는 id 값을 갖는 요소를 선택합니다.

먼저 URL에서 # 뒤에 붙은 주소(프래그먼트 식별자)가 무엇인지 알아보겠습니다.

URL은 도메인과 함께 일반적으로 부르는 경로 등으로 구성되어 있습니다. 여기 일반적인 URL 뒤에 #이 포함된 주소가 있습니다.

여기에서 #example 부분을 프래그먼트(Fragment)라고 합니다.
이 중에서 #을 뺀 example을 '프래그먼트 식별자'라고 합니다.

'프래그먼트 식별자'는 현재 페이지 내부에서 특정 요소를 가리키는 값이며, 특정 요소란 페이지 내부에 있는 id 속성의 값이 이 '프래그먼트 식별자'와 동일한 요소를 말합니다.

브라우저는 프래그먼트가 포함된 URL에 접근하면, 해당 '프래그먼트 식별자'와 동일한 요소를 찾아 화면의 상단으로 이동시킵니다.
이러한 동작은 사용자가 URL을 통해 특정 위치에 바로 접근했을 때, 해당 요소를 즉시 확인할 수 있도록 하기 위한 것입니다.

:target 가상 클래스 선택자를 사용하면, 이와 같이 URL의 프래그먼트가 가리키는 대상 요소(target)를 선택하여, 특정 상황에서 원하는 스타일을 적용할 수 있습니다.

위 주소창의 빨간색 부분(#example)이 실제 HTML에서 어떻게 작용하는지 정리해 보면 다음과 같습니다.

구분	내용	비고
URL 프래그먼트	`#example`	URL에서 `#` 뒤에 붙은 주소
대상 요소(target)	`<div id="example">`	`id` 속성의 값이 이 '프래그먼트 식별자'와 동일한 요소
`:target`	URL의 프래그먼트가 가리키는 대상 요소(target)를 선택	원하는 스타일을 적용

기본 예제

다음은 :target 가상 클래스 선택자가 현재 페이지 URL의 '프래그먼트 식별자'와 일치하는 요소를 선택하여 스타일을 적용하는 예제입니다.

예제에서는 목차에 있는 각각의 아이템이 href를 통해 프래그먼트가 포함된 URL로 링크되어 있습니다. 링크를 클릭하면 현재 페이지 URL에 프래그먼트가 추가되며, 해당 요소로 이동하게 됩니다.

HTML

<nav>
    <ul>
        <li><a href="#section-1">섹션 1 바로가기</a></li>
        <li><a href="#section-2">섹션 2 바로가기</a></li>
        <li><a href="#section-3">섹션 3 바로가기</a></li>
    </ul>
</nav>
<section id="section-1">
    <h2>섹션 1</h2>
</section>
<section id="section-2">
    <h2>섹션 2</h2>
</section>
<section id="section-3">
    <h2>섹션 3</h2>
</section>

CSS

nav {
    position: fixed;
    top: 1em; right: 50%;
    padding: 1em;
    color: white;
    background-color: black;
}
nav a {
    color: white;
}
section {
    height: 300px;
    padding: 1em; margin: 1em;
    border: 10px solid gray;
    transition: 2s;
}
section:target { /* URL의 프래그먼트가 가리키는 대상 요소를 선택하여, 원하는 스타일을 적용 */
    border-color: red;
    background-color: gold;
}

실제 적용된 모습

'실제 적용된 모습' 버튼을 클릭해 새 창으로 확인해 보세요!
실제 주소창의 '프래그먼트 식별자'와 동일한 요소가 section:target으로 선택될 때 지정한 스타일이 적용되는지 확인할 수 있습니다.