CSS3 :target selector

Các đường link với dấu # theo sau cho phép ta nhảy tới một thành phần trong trang HTML, thành phần đó được gọi là target element.

Thành phần với id là para-1 đang được nhảy đến. para-1 được gọi là hash

:target là một selector của CSS3, cho phép ta style cho target element hiện tại.

<a href="#content">Bấm vào đây</a>
<p id="content">
	Đây là nội dung chính
</p>

:target { background: orange; color: white; }

Ở ví dụ trên khi bấm vào liên kết, background và màu chữ của thẻ p#content sẽ thay đổi.

Nên sử dụng :target khi nào?

Khi bạn muốn style theo từng trạng thái của trang web. Bạn cũng có thể dùng javascript và gắn nhiều class cho các element để được kết quả tương tự, tuy nhiên có một chút khác biệt. :target nên được sử dụng khi:

• Style theo từng trạng thái của trang web
• Chấp nhận cách “nhảy trang” khi thay đổi hash
• Việc chuyển trạng thái được lưu vào history của trình duyệt

Demo

Giả sử trang web của tôi có ba đoạn văn bản, và ba nút bấm để đi tới từng đoạn văn bản đó. Tôi muốn khi nhảy đến đoạn văn bản nào thì đoạn đó sẽ được nổi bật lên.

Code HTML:

<ul class="links">
	<li><a href="#para-1">1</a></li>
	<li><a href="#para-2">2</a></li>
	<li><a href="#para-3">3</a></li>
</ul>

<div id="para-1">
	<h3>This is paragraph 1</h3>
	<p>Lorem ipsum dolor sit...</p>
</div>

<div id="para-2">
	<h3>This is paragraph 2</h3>
	<p>Morbi ac sapien neque...</p>
</div>

<div id="para-3">
	<h3>This is paragraph 3</h3>
	<p>Sed ligula urna, hendrerit...</p>
</div>

:target {	
	-webkit-transition: background 500ms  ease-out;
	-moz-transition: background 500ms  ease-out;
	-ms-transition: background 500ms  ease-out;
	-o-transition: background 500ms  ease-out;
	transition: background 500ms  ease-out;	
	color: white;
}
#para-1:target {
	background: #2484C6;
}
#para-2:target {
	background: #4EB161;
}
#para-3:target {
	background: #E64526;
}