CSS3 Target Pseudo class introduction

Source: Internet
Author: User

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/


Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.