CSS pseudo class :target

The :target pseudo-class applies to an element which has id matching with fragment identifier (string after hash). e.g. in url http://example.com/html/top.html#section1 section1 is fragment/anchor identifier.

Example – css :target

This example has two links #section1 and #section2. When user clicks on #section1 link, the style defined using :target is applied to element with id=section1.

<style type="text/css">
div:target {
  background-color: lightgreen;
<a href="#section1">#section1</a> <a href="#section2">#section2</a> 
<div id="section1">section1 content</div>
<div id="section2">section2 content</div>


Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit


Click here to write/view comments