30 CSS selectors to remember

Understand the basic ID selector, class selector and sub-selector, and if so, you'll miss out on a lot of flexible methods. Although some of the selectors mentioned in this article fall within the scope of CSS3, they are only valid in some newer browsers, but it is still necessary to remember these selectors.

1. *

* {margin:0; padding:0;}

Before referring to the more advanced selectors, for beginners, the common selector is solved first.
The asterisk character selects each element of the page. Many developers use it to reset all margin and padding to zero. This is of course a quick test method. But I suggest that you do not use it, it brings too much burden to the browser, which is not necessary.
A wildcard selector can also be used on a child selector.

#container * {border:1px solid black;}

It selects child elements in the #container layer. However, there is no need to use this technique often.
View Demo

Compatibility

• ie6+
• Firefox
• Chrome
• Safari
• Opera

2. #X

#container {   width:960px;   Margin:auto;}

The prefix of the hash symbol to the selector is the ID selector. This is a very common method. But it also needs to be cautious. Ask yourself: Is it absolutely necessary to give an ID in order to locate an element? The rigid stereotype ID selector cannot be reused. If possible, try using the label method, such as the HTML5 element, or pseudo-class first. (The rendering speed of the ID selector is the fastest, gains, the translator notes).
View Demo

Compatibility

• ie6+
• Firefox
• Chrome
• Safari
• Opera

3.. X

. error {  color:red;}

This is a class selector. The difference between the ID selector and the class selector is that the latter can be used for multiple elements. The class selector allows you to assign the same style to a group of elements, whereas an ID selector can only work on a specific single element.
View Demo

Compatibility

• ie6+
• Firefox
• Chrome
• Safari
• Opera

4. X Y

Li a {  text-decoration:none;}

Descendant selectors are used by many selectors. It acts on all Y elements within the X element. But if your selector is like x Y Z A B.error, then your method is wrong. It's a lot of overhead. (The render rate of the descendant selector is unpleasant, especially if there is a long prefix element, the translator notes)
View Demo

Compatibility

• ie6+
• Firefox
• Chrome
• Safari
• Opera

5. X

a {color:red;} UL {margin-left:0;}

The type selector selects labels of the same type in the page. Say ul{...} Will select all the UL in the page.
View Demo

Compatibility

• ie6+
• Firefox
• Chrome
• Safari
• Opera

6. X:visited and X:link

a:link {color:red;} a:visted {color:purple;}

: Link is used for links that have not been visited: visited acts on a link that has been visited.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

7. X + Y

UL + p {   color:red;}

believe that the selector acts only on the first element under the same parent element. In the example, only the font that is next to the first p in UL will be red.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

8. X > Y

Div#container > UL {  border:1px solid black;}

X y and X>y different places the latter selects only the first level of the X child element. For example, below

   <div id= "Container" >      <ul>         <li> List Item           <ul>              <li> child </li>           </ul>         </li>         <li> list item </li>         <li> list item </li>         < li> List Item </li>      </ul>   </div>

Selector #container>ul only select UL located directly under the #container layer, and will not act on the UL in Li.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

9. X ~ Y

UL ~ p {   color:red;}

This adjacent selector is similar to x+y, except that ul+p only selects the first p adjacent to UL, and X~y selects all p adjacent to UL.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

Ten. X[title]

A[title] {   color:green;}

A property selector. In the example above, only the link label with the title attribute is selected.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

X[href= "Foo"]

A[href= "http://net.tutsplus.com" {  color: #1f6053;/* nettuts green */}

The style in the above example will only be used for a label linked to Http://net.tutsplus.com. Other a tags that are not linked to this URL will not turn green.

This is useful, but a bit rigid, maybe I want to turn all the nettuts.com links into green. In this case, you can use some expressions.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

X[href*= "Nettuts"]

A[href*= "tuts" {  color: #1f6053;/* nettuts green */}

Yes, that's it. The href followed by an asterisk (wildcard character) makes all the links in the URL appear nettuts green. such as nettuts.com,tutsplus.com.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

x[href^= "http"]

a[href^= "http"] {   background:url (path/to/external/icon.png) no-repeat;   padding-left:10px;}

Some websites use this method to add some icons to some links to illustrate the link to other websites. It is often used to display the beginning of a string in an expression. If we want to choose that a-tag link with HTTP, we can use CSS like the above. (This is not a search of http://, which is not necessary for https://).
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

x[href$= ". jpg"]

a[href$= ". jpg"] {   color:red;}

Again, we used the notation of an expression, $, to find the tail of the string. In this example, we look at all links to images, perhaps the links ending in. jpg. This certainly does not work with GIF and PNG formats.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

X[data-*= "Foo"]

A[data-filetype= "image"] {   color:red;}

Back to the 8th one (? Feeling 8th and this is a little irrelevant); how do we compensate for different image formats: Png,jpeg,jpg,gif? We can use multiple selectors, such as:

a[href$= ". jpg"],a[href$= ". jpeg"],a[href$= ". png"],a[href$= ". gif"] {   color:red;}

Back to the 8th one (? Feeling 8th and this is a little irrelevant); how do we compensate for different image formats: Png,jpeg,jpg,gif? We can use multiple selectors, such as:

<a href= "path/to/image.jpg" data-filetype= "image" > Image Link </a>

With the hooks in place, we can use a standard property selector to select these tags.

A[data-filetype= "image"] {   color:red;}

View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

X[foo~= "Bar"]

A[data-info~= "external"] {   color:red;} a[data-info~= "image"] {   border:1px solid black;}

This is an impressive selector. There are not many people who know this skill. The ~ symbol allows us to select a label with a blank spacing attribute.

Just like the 15th selector, here we can use the spacer to list the Data-info attributes that need to be scoop. For example, let's give the chain some marks.

"<a href=" path/to/image.jpg "data-info=" external image "> Click Me, Fool </a>

Use the tag where appropriate, and then you can select any label with these attributes.

/* Target Data-info attr that contains the value "external" */a[data-info~= "external"] {   color:red;} /* and which contain the value "image" */a[data-info~= "image" {  border:1px solid black;}

View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

X:checked.

input[type=radio]:checked {   border:1px solid black;}

This pseudo-class selector will only be used for selected UI elements (user interface element), such as a radio button, or a check box.
View Demo

Compatibility

• ie9+
• Firefox
• Chrome
• Safari
• Opera

X:after.

This pseudo-class and: Before, is mainly used to clear the floating. But now people can find new ways to use them.

. clearfix:after {    content: "";    Display:block;    Clear:both;    Visibility:hidden;    font-size:0;    height:0;    }. Clearfix {   *display:inline-block;   _height:1%;}

Compatibility

• ie8+
• Firefox
• Chrome
• Safari
• Opera

X:hover.

div:hover {  background: #e3e3e3;}

This is a dynamic pseudo-class. The style works when the element has a mouse over it. Generally used for links. Like a:hover{border-bottom:1px solid black;} (border-bottom:1px solid black; effect than text-decoration:underline; good).

a:hover {border-bottom:1px solid black;}

Compatibility

• ie6+ (in IE6,: hover must is applied to an anchor element)
• Firefox
• Chrome
• Safari
• Opera

X:not (selector)

Div:not (#container) {   color:blue;}

This negation pseudo-class is very useful. For example, to select all layers except the #container layer. The code above is very effective.
Another example is that I want to select all the elements except the paragraph label (not recommended), you can do this:

*:not (p) {  color:green;}

View Demo

Compatibility

• ie9+
• Firefox
• Chrome
• Safari
• Opera

X::p seudoelement

p::first-line {   font-weight:bold;   Font-size:1.2em;}

The use of such pseudo-classes (by: Specifies) can be used to design a fragment of an element, such as the first line, or the first word. The thing to remember is that this pseudo-class can only be used for block elements.

Select the first character of a paragraph

p::first-letter {   float:left;   Font-size:2em;   Font-weight:bold;   font-family:cursive;   padding-right:2px;}

This snippet first extracts all the paragraphs in the page, and then finds the first word in the paragraph.
This method is often used to make newspaper-style pages.

Select the first line of a paragraph

p::first-line {   font-weight:bold;   Font-size:1.2em;}

View Demo

Compatibility

• ie6+
• Firefox
• Chrome
• Safari
• Opera

X:nth-child (N)

Li:nth-child (3) {   color:red;}

In the past, we were unable to choose a specific number from a bunch of elements. Nth-child pseudo-class can solve this problem.
Nth-child accepts an integer argument, but it is not based on zero, and if you want to select the second in the list, use Li:nth-child (2).
We can also use this pseudo-class to select several subclasses. For example, use Li:nth-child (4n) to select a 4 times-fold list.
View Demo

Compatibility

• ie9+
• Firefox 3.5+
• Chrome
• Safari

X:nth-last-child (N)

Li:nth-last-child (2) {   color:red;}

If there are a lot of items in the list, you just need to select the third. Using Li:nth-child (397) is less convenient than using Nth-last-child.
Unlike the above usage, nth-last-child is counted backwards from the back.
View Demo

Compatibility

• ie9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

X:nth-of-type (N)

Ul:nth-of-type (3) {   border:1px solid black;}

Choosing a subclass might not be as convenient as selecting elements by type. For example, there are now 5 unordered tables, but you can use Ul:nth-of-type (3) only if you choose the third one.
View Demo

Compatibility

• ie9+
• Firefox 3.5+
• Chrome
• Safari

X:nth-last-of-type (N)

Ul:nth-last-of-type (3) {   border:1px solid black;}

Yes, we can also use Nth-last-of-type to select the penultimate element.

Compatibility

• ie9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

X:first-child.

UL Li:first-child {   border-top:none;}

This structural pseudo-class selects the first child object of the parent element. This is often used to remove the borders of the first and last elements of a list.
View Demo

Compatibility

• ie7+
• Firefox
• Chrome
• Safari
• Opera

X:last-child.

ul > li:last-child {   color:green;}

This pseudo-class selects the last object of the parent element.

Example

Using a simple example to illustrate this selector, let's first make a list.

Label

  <ul>     <li> list item </li>     <li> list item </li>     <li> List Item </li >  </ul>

Very simple List

Css

UL {width:200px; background: #292929; color:white; list-style:none; padding-left:0;} Li {padding:10px; border-bottom:1px solid black; border-top:1px solid #3c3c3c;}

Set the background, remove the UL default padding, and then add an edge to each li.

<img title= "extraborders" src= "http://images.shejidaren.com/wp-content/uploads/auto_save_image/2011/ 08/103303jnb.png "width=" 634 "height=" 411 "/>

As shown in the picture, we need to remove the first and last edges. You can then use: First-child and: Last-child.

li:first-child {    border-top:none;} li:last-child {   border-bottom:none;}

<img title= "fixed" src= "http://images.shejidaren.com/wp-content/uploads/auto_save_image/2011/08/ 10330391y.png "width=" 618 "height=" 387 "/>

View Demo

Compatibility

• ie9+
• Firefox
• Chrome
• Safari
• Opera

YEP–IE8 supported :first-child , but not :last-child . Go figure.

X:only-child.

Div p:only-child {   color:red;}

Indeed, you may seldom use this. But this is really useful.
In the following example, only the P tag in the first layer will change color. This pseudo-class effect stops when there are more than one subclass of the parent element.

<div><p> My paragraph here. </p></div><div>   <p> Paragraphs total </p>   <p> paragraphs. </p></div>

View Demo

Compatibility

• ie9+
• Firefox
• Chrome
• Safari
• Opera

X:only-of-type.

Li:only-of-type {   font-weight:bold;}

Similar to 28 structural pseudo-classes, this pseudo-class works only if there is only one child element x under the parent element. In this case, you can also use UL Li, but this will select all the list items.

ul > Li:only-of-type {   font-weight:bold;}

View Demo

Compatibility

• ie9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

X:first-of-type.

First-of-type allows us to select the first of a sibling element.

A test

For the sake of understanding, do a test. Copy the following label

<div>   <p> My paragraph here </p>   <ul>      <li> List Item 1 </li>      < Li> list Item 2 </li>   </ul>   <ul>      <li> list Item 3 </li>      <li> List Item 4 </li>   </ul></div>

Now, try to select list Item 2, and when you find the method or give up, take a look.

Method 1

There are several different methods. We judge several of them. First Use First-of-type

Ul:first-of-type > Li:nth-child (2) {   font-weight:bold;}

This code means to find the first unordered list in the page, and then find its immediate child element (that is, Li), and finally find the second Li.

Method 2

P + ul Li:last-child {   font-weight:bold;}

In this example, look for the UL tag that is directly adjacent to the P tag, and then find the first Li (the second Li).

Method 3

Ul:first-of-type Li:nth-last-child (1) {   font-weight:bold;}

View Demo

Compatibility

• ie9+
• Firefox 3.5+
• Chrome
• Safari
• Opera

Translation: focusec.cn
Source text: http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

30 CSS selectors to remember