CSS3 Target Pseudo class introduction

The CSS3 target pseudo class is one of many useful CSS3 features. It is used to match the target element of a marker in the URI of the document (page). Specifically, a marker in a URI usually contains a "#" character followed by a name of a marker, such as #respond,target, which matches an element with an ID of respond.

Now in the page, click on an ID link, the page will only jump to the appropriate location, but there will not be a more obvious UI identification, use: The target pseudo class can be like: hover and other pseudo classes to define the style of the target element.

Browser support

Because we are talking about CSS3, it is now supported by all browsers except Ie6-8, but IE9 will support this pseudo class. This is rather regrettable, but this reality does not affect your use of it.

How to use: Target

: The target pseudo class and: hover,: Link,: Visited,: Focus, and other pseudo-class usage is the same:

1 2 3 4

selector:target{ color:red; /*other styles*/ }

Instance

Let's demonstrate with a simple example. For example, we often use the tab in the page, before we have to use the feet originally realized, YUI, jquery also have such plug-ins or modules, but now we use: Target pseudo class can be achieved.

HTML structure:

1 2 3 4 5 6 7 8 9 Ten 11

<ul class= "tabs" > <li><a href= "#tab1" > tags one </a></li> <li ><a href= "#tab2" > tags two </a></li> <li><a href= "#tab3" > tag three </a ></li> </ul> <div id= "tab1" class= "tab_content" > <!--tabed content--></div> <div id= "tab2" class= "tab_content" > <!--tabed content-- ></div> <div id= "tab3" class= "tab_content" > <!--tabed content--></ Div>

CSS3 Code:

1 2 3 4 5 6 7 8

/*layout styles*/ . tab_content { position: absolute;/*set Content box as absolute*/ /*other Layout styles*/ } #tab1: Target, #tab2: Target, #tab3: target { z-index: 1; }

The principle must be understood by all, is to set the tab content box to absolute positioning, and then through: Target pseudo class to adjust its z-index.

Here is a demo page.

The concrete usage is so simple, in the actual project everybody can be free to play the:)

Extended Reading

• Https://developer.mozilla.org/en/CSS/:target
• Http://www.red-team-design.com/get-to-know-your-css3-target-pseudo-class
• http://css-tricks.com/css3-tabs/