HTML Dog
Skip to navigation

Anchors and targets

Linking to parts of a page, and styling them using the :target pseudo class.

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>The target pseudo class</title>
	<style>
		body {
			font: 100% arial, helvetica, sans-serif;
		}
	
		h2 {
			color: #f60;
		}
	
		h2:target {
			color: white;
			background: #f60;
		}
	</style>
</head>

<body>
	<p>You can read a whole load of content, or get straight to the <a href="#nittygritty">nitty-gritty</a>.</p>
	<p>Alternatively, you can read the  <a href="#grittynitty">gritty-nitty</a>.</p>
	<p>Or if you prefer, try the <a href="#wittyditty">witty ditty</a>.</p>

	<!--[A whole load of content]-->

	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
	<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
	<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>

	<h2 id="nittygritty">Nitty-Gritty</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
	<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
	<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
	<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
	<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>

	<h2 id="grittynitty">Gritty-Nitty</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
	<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
	<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>

	<h2 id="wittyditty">Witty-Ditty</h2>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas consequat dui sit amet est pharetra luctus. Morbi ut lacus. Ut volutpat rutrum pede. Donec quis erat. Maecenas accumsan consectetuer tortor. Aliquam non enim. Morbi tristique mi ut quam.</p>
	<p>Etiam porta, erat in placerat sodales, tortor mauris gravida sapien, non congue erat mauris vitae purus. Nam eget ipsum non libero fermentum varius. In hac habitasse platea dictumst. Ut non neque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
	<p>Suspendisse augue. Morbi elit nisl, commodo in, nonummy sit amet, eleifend a, quam. Mauris lorem. Nullam nec sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nulla sem, hendrerit sit amet, adipiscing quis, rhoncus nec, purus.</p>
	<p>Duis quis mi eget nisi pharetra venenatis. Ut sagittis erat vitae turpis tristique adipiscing.</p>

	<!-- Link back to HTML Dog: -->
	<p><a href="http://www.htmldog.com/examples/"><img src="http://www.htmldog.com/badge1.gif" alt="HTML Dog"></a></p>
</body>
</html>

Output

View original