CSS3 Pseudo class Selector detailed

The first two sections in the "CSS3 basic selector" and "CSS3 property selector in detail" introduced the basic selector in the CSS3 selector and the use of the property selector, today to learn with you CSS3 the third part of the selector, but also the last part-pseudo-class selector. Pseudo-Class selector for everyone is most familiar with: Link,:focus,:hover and the like, because these are commonly used in the ordinary pseudo-class selector, then together with you to briefly summarize the CSS commonly used in the use of pseudo-class selectors, and finally put the center of gravity to CSS3 new added ": Nth-child "How to use selectors.

As before, create a DOM before you begin:

<div class= "Demo Clearfix" >  <ul class= "Clearfix" ><li class= "first links odd" id= "first" ><a Href= "" >1</a></li><li class= "links even" ><a href= "" >2</a></li><li class= "Links odd" ><a href= "" >3</a></li><li class= "links even" ><a href= "" >4</a>< /li><li class= "links odd" ><a href= "" >5</a></li><li class= "links even" ><a href= "" >6</a></li><li class= "links odd" ><a href= "" >7</a></li><li class= "links Even "><a href=" ">8</a></li><li class=" links odd "><a href=" ">9</a></li ><li class= "Links even last" id= "last" ><a href= "" >10</a></li></ul></div>

Let's just add some style to make him look good.

     . demo {width:300px;border:1px solid #ccc;p adding:10px;     }     . Demo Li {border:1px solid #ccc;p adding:2px;float:left;margin-right:4px;     }     . Demo a {float:left; display:block; height:20px; line-height:20px; width:20px;-moz-border-radius:10px;-webkit-bord er-radius:10px; border-radius:10px; Text-align:center; Background: #f36; Color:green; Text-decoration:none;     }

The most effective:

CSS's pseudo-class syntax is a little different from other syntaxes, and there are two main ways of expressing it.

    E:pseudo-class {property:value}/* where E is the element; Pseudo-class is the pseudo-class name; property is the attribute of the CSS; value is the property of the CSS */

Example:

a:link {color:red;}

The second type of notation

E.class:pseudo-class{property:value}

Such as:

   a.selected:hover {color:blue;}

Let's take a look at the specific applications of these pseudo-classes:

First, dynamic Pseudo-class

Dynamic pseudo-classes, because these pseudo-classes do not exist in the HTML, and only when the user and the site to reflect the interaction, the dynamic pseudo-class contains two, the first is we often see in the link anchor pseudo-class, such as ": Link", ": visited"; another is called User behavior Pseudo-class, such as ": Hover ",": Active "and": Focus ". First look at the most common anchor-point pseudo-class

. demo A:link {Color:gray;} /* The foreground color is gray */.demo A:visited{color:yellow when the link is not accessed;} /* After the link is accessed, the foreground color is yellow */.demo a:hover{color:green;} /* The foreground color is green */.demo a:active{color:blue when hovering over the link;} /* Activate the link in the mouse click the foreground color is blue */

For these four anchor pseudo-class settings, one thing to pay special attention to is their sequencing, to let them abide by a principle of love and hate love/hate, that is, link--visited--hover--active. If you mistake the order will bring you unexpected mistakes, we should be very familiar with this, if it is a beginner friend, you can practice privately. Where: hover and: Active is also included in the user behavior pseudo-class, they are expressed to mean:

1. : Hover is used to effect when the user moves the mouse over the element;
2. : Active is used for the effect that the user clicks on the element (which is happening at the point, release the left mouse button This action is completed)
3. : focus is used for elements as the focus, which is often used on form elements.

The button on this site uses these effects:

    . form-submit {-moz-transition:border-color 0.218s ease 0s;-webkit-transition:border-color 0.218s Ease 0s;-o-transiti On:border-color 0.218s ease 0s;-ms-transition:border-color 0.218s ease 0s;transition:border-color 0.218s Ease 0s;backgr Ound:none Repeat scroll 0 0 #F5F5F5; border:1px solid #DCDCDC;-moz-border-radius:2px 2px 2px 2px;-webkit-border-radius: 2px 2px 2px 2px;border-radius:2px 2px 2px 2px;color: #333333; font:11px/27px arial,sans-serif;height:27px;padding:0 8px     ; text-align:center;text-shadow:0 1px 0 rgba (0, 0, 0, 0.1); }. form-submit:hover {background-color: #F8F8F8; Border-color: #C6C6C6;-moz-box-shadow:0 1px 2px rgba (0, 0, 0, 0.15);-     webkit-box-shadow:0 1px 2px rgba (0, 0, 0, 0.15), box-shadow:0 1px 2px rgba (0, 0, 0, 0.15); color: #333333;  }. form-submit:active {border-color: #4D90FE;-webkit-box-shadow:0 1px 2px rgba (0, 0, 0, 0.3) inset;-moz-box-shadow:0 1px 2px rgba (0, 0, 0, 0.3) inset;box-shadow:0 1px 2px rgba (0, 0, 0, 0.3) Inset;color: #000000;     }. form-submit:focus {border:1px solid #4D90FE!important; }

For: hover only A-element support under IE6: active only ie7-6 not supported: Focus is not supported under IE6-7.

Second, UI element State pseudo-class

We put ": Enabled", ":d isabled", ": Checked" Pseudo-class called UI element State Pseudo-class, these are mainly for the HTML of the form element operation, the most common such as we "type=" text " There are two states of enable and disabled, the former is writable and the latter is non-state, and "type=" Radio "and" type= "checkbox" have "checked" and "unchecked" states. Take a look at two examples, for example, if you want to distinguish "disabled" text boxes from other text boxes, you can apply

        Input[type= "text"]:d isabled {border:1px solid #999; Background-color: #fefefe;}

This applies a different style to the disabled text box in the page. The same is true for several other usages, which are not described here. Ie6-8 does not support the three selectors ": Checked", ": Enabled", ":d isabled".

Third, CSS3: Nth Selector

This section is the key, is also the latest part of the CSS3 selector, some people also call this selector for the CSS3 structure class, the following we through the actual application to understand their use and differences, first listed his choice method:

1. : Fist-child selects the first child element of an element;
2. : Last-child selects the last child element of an element;
3. : Nth-child () selects one or more specific child elements of an element;
4. : Nth-last-child () selects one or more specific child elements of an element, starting from the last child element of the element;
5. : Nth-of-type () selects the specified element;
6. : Nth-last-of-type () selects the specified element, starting from the last of the element;
7. : First-of-type selects the first homogeneous sub-element under a superior element;
8. : Last-of-type selects the last homogeneous sub-element of a superior element;
9. : Only-child The selected element is the only element of its parent element;
10. : Only-of-type Select an element that is the only child of the same type as its ancestor element;
11. : Empty selects elements without any content.

Here we introduce the various selectors listed above, one by one:

1,: First-child

: First-child is used to select the first child element of an element, such as our demo here, you want to make the list of "1" with a different style, we can use: First-child to achieve:

      . demo Li:first-child {background:green; border:1px dotted blue;}

Before we can have this selector, we need to add a different class name to the first Li, like "firstly", and then apply a different style to him.

     . demo Li.first {background:green; border:1px dotted blue;}

In fact, the two final effect is the same, just the latter, we need to add an extra class name in HTML, see the effect:

IE6 not supported: First-child selector.

2,: Last-child

: The Last-child selector is similar to the following: The First-child selector, unlike the ": Last-child" Selection, is the last child element of the element. For example, we need to give a different style to the last item in the list, so we can use this selector, such as:

     . demo Li:last-child {background:green; border:2px dotted blue;}

This effect is the same as the "last" class that was previously on the list.

     . demo Li.last {background:green; border:2px dotted blue;}

They show the effect is consistent,;

3,: Nth-child ()

: Nth-child () can select one or more specific child elements that you can select in this way:

: Nth-child (length);/* parameter is the specific number */:nth-child (n);/* parameter is n,n from 0 to calculate */:nth-child (n*length)/*n a multiple selection, n from 0 to calculate */:nth-child (n+ length);/* Select an element greater than length */:nth-child (-n+length)/* Select an element that is less than the length preceding */:nth-child (n*length+1), or/* for a few choices */// The length above is an integer

: Nth-child () can define his value (the value can be an integer, or it can be an expression), as shown above, to select a specific child element, for this we look directly at the instance, than I said better understanding.

: Nth-child (3), select the third sub-element under an element (where 3 can be the number you need), for example, I need to select the third Li element in the list, so we can use it directly:

. Demo Li:nth-child (3) {background:lime;}

The effect is as follows:

This type of li:nth-child cannot refer to negative values, which means that the use of the method is incorrect (-3).

: Nth-child (n), where n is a simple expression, then the value of "n" is calculated from "0", and when is the end I don't know, if you use it directly in the actual application, all the child elements will be selected, for example, in our demo, You use ": Nth-child (N)" in Li, then all the "Li" will be selected, such as:

. Demo Li:nth-child (n) {background:lime;} equals. demo li {background:lime;}

That's how he calculates it, actually.

N=0--"No selection element N=1--" Select the first li,n=2--"Select the second Li, and so on, so that down the selection of all Li

Please see the effect:

Please note that the "n" here can only be "n", cannot use other letters instead, otherwise it will have no effect.

: Nth-child (2n), the way is the previous one, we can choose twice times the number of N, of course, "2" can be replaced by your own need for the number, such as:

. Demo Li:nth-child (2n) {background:lime;} equals. Demo Li:nth-child (even) {background:lime;}

Let's take a look at the process of its calculation:

N=0--"2n=0--" did not select any element, N=1-"2n=2-" chose the second lin=2-"2n=4-" chose the fourth Li, followed by and so on

If "2n" is the same as using the "even" named class to define the style, the effect is the same:

": Nth-child (2n)" is also equal to ": Nth-child (even)" effect.

: Nth-child (2n-1), this selector is on the ": Nth-child (2n)" based on the evolution of the above said that people are selected even, then we subtract "1" on his basis becomes an odd choice, such as:

. Demo Li:nth-child (2n-1) {background:lime;}

Let's take a look at the implementation process

N=0-"2n-1=-1-" also did not select any element, N=1-"2n-1=1-" Select the first lin=2-"2n-1=3-" Select the third Li, and so on.

In fact, to achieve this odd effect, we can also use ": Nth-child (2n+1)" and ": Nth-child (Odd)", together to see their effects

: Nth-child (n+5) This selector is selected starting from the Fifth element, where the numbers you can define yourself, such as:

. Demo Li:nth-child (n+5) {background:lime;}

As the previous calculation method, let's take a look at

N=0--"n+5=5--"  selected 5th Lin=1--"n+5=6-"  Select the 6th Li, the back is not listed, the same principle

You can use this method to select the element position you need to start selecting, that is, change the number, the starting position is changed, look at the following:

: Nth-child (-n+5) This selector is just the opposite of the selector above, this is the selection of the 5th front, such as:

. Demo Li:nth-child (-n+5) {background:lime;}

If you don't know what's going on, you just have to figure it out.

N=0-"-n+5=5-" chose the 5th lin=1-"-n+5=4-" chose the 4th lin=2-"-n+5=3-" selected 3rd lin=3-"-n+5=2-" chose 2nd lin=4-"-n+5=1 --"chose the 1th lin=5--"-n+5=0--"no element selected

From the above calculation method, we know very clearly how to get, and finally we look at the effect:

: Nth-child (4n+1) This method is to achieve the effect of a few choices, such as we are here to choose a three, if you change "4" to another number that is another kind of separation, such as this example

. Demo Li:nth-child (4n+1) {background:lime;}

We mainly look at the results of the calculations.

N=0-"4n+1=1-" chose the first lin=1-"4n+1=5-" chose the fifth lin=2-"4n+1=9-" chose the nineth Li

The effect is as follows

Ie6-8 and ff3-browsers do not support the ": Nth-child" selector.

4,: Nth-last-child ()

": Nth-last-child ()" Selector and the previous ": Nth-child ()" very similar, but here is a last, so he played the role and the previous ": Nth-child" is not the same, he just from the final element to calculate, to select specific elements. Let's look at a few examples:

. Demo Li:nth-last-child (4) {background:lime;}

The above code indicates the selection of the bottom fourth list item, the effect is as follows:

where ": Nth-last-child (1)" and ": Last-child" function is the same, all means to select the last element.

In addition, ": Nth-last-child ()" Can also be like ": Nth-child ()", you can use an expression to select specific elements, let's look at the role of a few special expressions

: Nth-last-child (2n), which represents the calculation from the back of the element, the selection is an even number of numbers, which in turn is the selection of elements of the odd, and the previous ": Nth-child (2n+1)", ": Nth-child (2n-1)", ": Nth-child (Odd)" The role is the same. Such as:

. Demo Li:nth-last-child (2n) {background:lime;}. Demo Li:nth-last-child (even) {background:lime;} equals. Demo Li:nth-child (2n+1) {background:lime;}. Demo Li:nth-child (2n-1) {background:lime;}. Demo Li:nth-child (odd) {background:lime;}

Please see the effect:

: Nth-last-child (2n-1) This selector is just the opposite of the above, from the back of the selection is an odd number, and from the previous calculation selected is even bit, the front ": nth-child (2n)" and the like is the same effect, such as:

. Demo Li:nth-last-child (2n+1) {background:lime;}. Demo Li:nth-last-child (2n-1) {background:lime;}. Demo Li:nth-last-child (odd) {background:lime;} equals:. Demo Li:nth-child (2n) {background:lime;}. Demo Li:nth-child (even) {background:lime;}

The effect is as follows

Looking at these examples, we all know that ": Nth-last-child ()" and "Nth-child ()" are used the same way, except that their difference is ": Nth-child ()" is calculated from the first start of the element, and ": Nth-last-child () "is calculated from the last start of the element, and they are calculated the same way. Also in Ie6-8 and ff3.0-browsers do not support the ": Nth-last-child ()" Selector.

5,: Nth-of-type

: Nth-of-type similar to: Nth-child, the difference is that he only calculates the element specified in the selector, in fact, our previous instance has specified a specific element, the selector is mainly used to locate the element contains a lot of different types of elements is very useful, for example, We div.demo a lot of p elements, Li elements, IMG elements, etc., but I just need to select the P element and let him have a different style every other P element, then we can simply write:

. Demo P:nth-of-type (even) {background-color:lime;}

In fact, this use and: Nth-child use is the same, you can also use: Nth-child of those expressions and methods of use, the only difference is that the type of the element is specified. Also in Ie6-8 and ff3.0-browsers do not support this selector

6,: Nth-last-of-type

This selector goes without saying that everyone can imagine it, and he is using the same as the previous: Nth-last-child, except that he refers to the type of element.

Also in Ie6-8 and ff3.0-browsers do not support this selector

7,: First-of-type and: Last-of-type

: First-of-type and: Last-of-type These two selectors are similar to: First-child and: Last-child, the difference is that the type of the element is specified.

: Nth-of-type,:nth-last-of-type;:first-of-type and: Last-of-type The actual meaning is not very big, we said before: Nth-child such as the selector can achieve this function, But if you are interested, you can understand that the practical value is not very large. Such statements are for informational purposes only.

8,: Only-child and: Only-of-type

": Only-child" means that an element is the only child element of its parent element. Let's take a look at an example to better understand

<div class= "POST" >    <p>lorem ipsum dolor sit amet, consectetur</p>    <p>lorem ipsum dolor Sit amet, consectetur</p> </div> <div class= "POST" >    <p>lorem ipsum dolor sit amet, Consectetur</p> </div>    

CSS Styles

. Demo. Post p {background:lime;}

Preliminary effect

If I need to change the style of this p when I have only one P element in Div.post, then we can now use: Only-child, such as:

. Demo. Post p {background:lime;}. Demo. Post P:only-child {background:red;}

When only Div.post has one child element p at this point, his background color will change:

: Only-of-type is an element he has a lot of child elements, and only one of them is unique, so we can choose the only child element in this way, for example

<div class= "POST" >    <div>lorem ipsum dolor sit amet, consectetur</div>    <p>lorem ipsum dolor sit amet, consectetur</p>    <div>lorem ipsum dolor sit amet, consectetur</div></div>

If we want to select only the P element in the above, we can write this,

p:only-of-type{background-color:red;}

Ie6-8 Browser not supported: Only-child selector; ie6-8 and ff3.0-browsers do not support: Only-of-type selector.

9,: Empty

: Empty is used to select elements without any content, there is no content refers to a little content, even if it is a space, for example, you have three paragraphs, one paragraph nothing, completely empty, you want this p does not show, then you can write:

p:empty {display:none;}

Ie6-8 Browser not supported: Empty selector

Three, negative selector (: not)

The negative selector and the JQ: The not selector is exactly the same, take the element in the form to illustrate the use of the selector, such as you want to the form of all input border, but do not want to submit also change, at this point can be used: not for the implementation

Input:not ([type= "submit"]) {border:1px solid red;}

The negative selector: not () allows you to locate an element that does not match the selector. Ie6-8 Browser does not support: not () selector

Four, pseudo-elements

Pseudo elements in CSS you've seen it before: first-line,:first-letter,:before,:after; then in CSS3, he made some adjustments to the pseudo-elements, adding a ":" to the previous base: First-letter,::first-line,::before,::after "In addition he added a":: Selection ", two":: "and a": "CSS3 is mainly used to distinguish between pseudo-class and pseudo-elements, so far, Both of these approaches are accepted, meaning that no matter which one is used, the effect is the same, but a different writing format.

So let's take a quick look at their role

:: First-line Select the first line of the element, such as changing the style of the first text of each paragraph, we can use this

p::first-line {font-weight:bold;}

:: First-letter Select the first letter of the text block, unless there are some other elements in the same line, but this is mainly used in paragraph layout, such as the drop cap,

P::first-letter {font-size:56px;float:left;margin-right:3px;}

:: before and:: after these two are used primarily to insert content in front or behind elements, these two commonly used "content" together, the most seen is to clear the float,

. clearfix:before,.clearfix:after {    content: ".";    Display:block;    height:0;    Visibility:hidden;}. Clearfix:after {clear:both;}. Clearfix {zoom:1;}

Of course, you can use them to make other better results, such as the first side of the Triangle paper effect, also through this to achieve.

So the selector for CSS3 here is all over, if you are interested in this thing, you can click here to learn more knowledge. If you read all the three chapters about the CSS3 selector, you will soon find that there are many selectors and jquery selectors are very similar, the new things are not many, personally think the most practical is: Nth-child these, The role in a particular environment is quite large, if you are a front-end bold try, you can try these new selector use method, this can let you save a lot of tags, if you think it is not practical in the project, but let you study is pretty good. Ha....

Thank W3cplus for the wonderful text.

Welcome everyone to join the Internet Technology Exchange Group:62329335