Shulou(Shulou.com)06/03 Report--

This article is to share with you about the 30 css selectors you should know. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article. Let's take a look at it.

1.*

The code is as follows:

* {

Margin: 0

Padding: 0

}

For beginners, the first selector to learn before learning more advanced selectors.

The asterisk selector will match every element on the page. Many developers use this technique to reset the outer and inner margins to zero. While this does work well in quick testing, I recommend that you never use it again in production code. It puts a lot of unnecessary burden on browsers.

* can also be used as a sub-selector.

The code is as follows:

# container * {

Border: 1px solid black

}

This will match each descendant element of # container div. Again, try not to use this technology.

View examples

Compatibility

IE6+

Firefox

Chrome

Safari

Opera

2.#X

The code is as follows:

# container {

Width: 960px

Margin: auto

}

The pound sign prefix allows us to choose id. This is the most common usage, but ID selectors should be used with caution.

Ask yourself again and again: do I have to need id to match the element I want to choose?

The id selector is unique and does not allow reuse. If possible, try using a tag name, a new HTML5 element, or even a pseudo class.

View examples

Compatibility

IE6+

Firefox

Chrome

Safari

Opera

3. .X

The code is as follows:

.error {

Color: red

}

Now we are talking about class selectors. Id differs from classes in that the latter can be used multiple times. You can use class selectors when you want to style a set of elements. In addition, use id only when you are anxious to apply styles to special elements.

View examples

Compatibility

IE6+

Firefox

Chrome

Safari

Opera

4. X Y

The code is as follows:

Li a {

Text-decoration: none

}

The next most commonly used selector is the descendant selector. You can use it when you need to add particularity to your selector. For example, what if you only want to match anchor elements under an unordered list? The descendant selector will come in handy at this time.

Tip-if your selector looks like this X Y Z A B.error, you are wrong. Always ask yourself if it is necessary to use this high weight.

View examples

Compatibility

IE6+

Firefox

Chrome

Safari

Opera

5. X

The code is as follows:

A {color: red;}

Ul {margin-left: 0;}

If you want to match all the elements on the page, according to their type, rather than id or class name? Obviously, use type selectors. If you need to select all the unordered lists, use ul {}.

View examples

Compatibility

IE6+

Firefox

Chrome

Safari

Opera

6. X:visited and X:link

The code is as follows:

A:link {color: red;}

A:visted {color: purple;}

We use: link pseudo-class selector to select all anchor tags that have been clicked.

In addition, we also have: visited pseudo-class selectors, which, as you would expect, allow us to style only anchor tags that have been clicked or visited on the page.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

7. X + Y

The code is as follows:

Ul + p {

Color: red

}

This is called an adjacent selector. It will only select the Y element immediately after the X element. In the above example, only the text of the first paragraph element after each ul is red.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

8. X > Y

The code is as follows:

Div#container > ul {

Border: 1px solid black

}

The difference between X Y and X > Y is that the latter chooses only direct offspring. For example, consider the following tag.

The code is as follows:

List Item

Child

List Item

List Item

List Item

The selector # container > ul will select only the direct descendant ul of div whose id is container. It does not match the deeper ul of the offspring of li.

Therefore, the use of descendant selectors has a performance advantage. In fact, the same applies to javascript engines based on css selectors.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

9. X ~ Y

The code is as follows:

Ul ~ p {

Color: red

}

This is the same sibling selector as X + Y, however, it has no constraints. The sibling selector is broader than the adjacent selector (ul + li) that selects only the first element after the previous selector. It will select any p element that is more likely to follow ul in our previous example.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

10. X [title]

The code is as follows:

A [title] {

Color: green

}

It's called a property selector, and in our example above, this only selects anchor tags with the title attribute. Anchor tags without this attribute will not be affected by the image. But what if you need more features? Hehe.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

11. X [href=foo]

The code is as follows:

A [href= "http://net.tutsplus.com"] {

Color: # 1f6053; / * nettuts green * /

}

The above code snippet will style all anchor tags where the href attribute is http://net.tutsplus.com; they will be displayed as our brand green. All other anchor tags will not be affected.

Notice that we enclose the href value in quotation marks. Remember to do the same when using javascript's css selector engine. If possible, use css3 selectors instead of unofficial methods whenever possible.

It works well, but it's a little inflexible. What if the link does connect directly to Nettus+, but maybe the path is a relative path to nettust? In this case, we can use a little regular expression syntax.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

12. X [href*=nettuts]

The code is as follows:

A [href*= "tuts"] {

Color: # 1f6053; / * nettuts green * /

}

Here it comes. No, this is the code we need. The * sign specifies that the value that contains the attribute must contain the defined value. That is, this code contains an href value of nettuts.com,net.tutsplus.com or tutsplus.com.

Keep in mind that this description is too broad, what if an anchor tag links to a site with tuts non-Envato in the connection (tutsplus is part of Envato)? So you need more features to restrict, using ^ and & to qualify the beginning and end of the string, respectively.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

13. X [href ^ = http]

The code is as follows:

A [href ^ = "http"] {

Background: url (path/to/external/icon.png) no-repeat

Padding-left: 10px

}

Have you ever wondered how some websites define a link to an icon? I'm sure you've seen it. These links are easy for you to jump to another site.

It is often easy to use ^ (carat) gray. This symbol often indicates the beginning of a string in a regular expression. If we want to point to all the anchors of the "href" attribute that starts with "http", we can use a code similar to the one above.

Note that we don't need to search for "http://", is totally unnecessary, because we have to include links that start with https://."

What if we want to define styles for all links to pictures? In this case, we have to search for the end of the string.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

14. X [href$=.jpg]

The code is as follows:

A [href$= ".jpg"] {

Color: red

}

Again, let's use the regular expression symbol, $(dolor), as the end tag of the string. In this case, we will search for all anchors where url ends with .jpg. Remember that images in gif and png formats will not be selected in this case.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

15. X [data-* = foo]

The code is as follows:

A [data-filetype= "image"] {

Color: red

}

Looking back at the most recent one, how can we include various image types: png,jpeg,jpg,gif? It's easy to think that we can do it through multiple selectors, like this:

The code is as follows:

A [href$= ".jpg"]

A [href$= ".jpeg"]

A [href$= ".png"]

A [href$= ".gif"] {

Color: red

}

However, this is very painful and inefficient. Another solution is to use custom properties. What if we add our own data-filetype attribute to each anchor linked to the image?

The code is as follows:

Image Link

After this association, we can use the standard property selector to specify these links. Look at the following:

The code is as follows:

A [data-filetype= "image"] {

Color: red

}

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

16. X [foo~=bar]

The code is as follows:

A [data-info~= "external"] {

Color: red

}

A [data-info~= "image"] {

Border: 1px solid black

}

Here is a little-known special technique that definitely impresses you. The ~ (tilda) character, which can help us point to elements with attributes separated by spaces (what a mouthful, I can't understand the translation myself, level problem)

Taking our custom attribute in Article 15 as an example, we created the data-info attribute in the above code, which can define multiple values separated by spaces. In this way, the link itself is an icon and points to a link to an image, as shown below.

The code is as follows:

Click Me, Fool

With such appropriate tags, by using the technique of the attribute selector, we can point to either of the two attributes.

The code is as follows:

/ * 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

}

It's great, isn't it?

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

17. X:checked

The code is as follows:

Input [type=radio]: checked {

Border: 1px solid black

}

This pseudo-class matches only the selected radio elements. It's that simple.

View examples

Compatibility

E9 +

Firefox

Chrome

Safari

Opera

18. X:after

Before and after pseudo-elements are also very painful. It seems that people can find or invent new ways to use them effectively every day. They can easily control the content around the selector.

Many are used for the first time because they need to improve on clear-fix.

The code is as follows:

.clearfix: after {

Content: ""

Display: block

Clear: both

Visibility: hidden

Font-size: 0

Height: 0

}

.clearfix {

* display: inline-block

_ height: 1

}

This improvement uses: after pseudo-class elements to add a space after the element, and then clear it. You should include this awesome technique in your toolkit, especially when the overflow:hidden method is powerless.

Want to see other creative uses: visit my tips for creating shadows

Through the standard specification for Css3 selectors, you should skillfully use these pseudo-class syntax-the double colon::. However, for compatibility, the browser accepts a double quotation mark.

Compatibility

IE8+

Firefox

Chrome

Safari

Opera

19. X:hover

The code is as follows:

Div:hover {

Background: # e3e3e3

}

I'll go. You have to understand this. A typical official form of a user triggers a pseudo class. It sounds a little confusing, but it's not. Want to define a special style when the user hovers over an element? That's what this attribute is for.

Remember, compared to the old version of IE, you can only use this hover after the anchor label.

The case where you use this selector most often may be to add a border-bottom when the anchor is hovering.

The code is as follows:

A:hover {

Border-bottom: 1px solid black

}

Tip: border-bottom:1px solid black; looks a little better than text-decoration:underline;. Really? I'll go)

Compatibility

IE6+ (In IE6,: hover must be applied to an anchor element)

Firefox

Chrome

Safari

Opera

20. X:not (selector)

The code is as follows:

Div:not (# container) {

Color: blue

}

Not pseudo-class gray is often useful. For example, I want to select all div, except those with id as container. The above code snippet can be implemented perfectly.

If I want to select all elements except p, I can do this:

The code is as follows:

*: not (p) {

Color: green

}

View examples

Compatibility

IE9+

Firefox

Chrome

Safari

Opera

21. X::pseudoElement

The code is as follows:

P::first-line {

Font-weight: bold

Font-size: 1.2em

}

We can use pseudo elements (represented by::) to define the style of the element. For example, the first line, the first character, remember, this method can only be applied to sibling elements.

Pseudo elements consist of two colons:

Specifies the style of the first character of p

The code is as follows:

P::first-letter {

Float: left

Font-size: 2em

Font-weight: bold

Font-family: cursive

Padding-right: 2px

}

This code finds all the paragraphs and then defines the first character of those paragraphs.

This is often used in the acronym style of imitation newspaper articles.

Specify the first line style of p

The code is as follows:

P::first-line {

Font-weight: bold

Font-size: 1.2em

}

Again, this:: first-line pseudo-element defines only the style of the first line of the paragraph, as we would expect.

View examples

Compatibility

IE6+

Firefox

Chrome

Safari

Opera

twenty-two。 X:nth-child (n)

The code is as follows:

Li:nth-child (3) {

Color: red

}

Think about the days when you couldn't select elements from the element heap. The nth-child pseudo-class solves this problem.

Note that nth-child accepts integers and variables, but not starting at 0. If you want to select the second li, use li:nth-child (2).

We even use this method to select any child elements. For example, we can use li:nth-child (4N) to complete the selection of all elements with multiples of 4.

View examples

Compatibility

IE9+

Firefox 3.5 +

Chrome

Safari

23. X:nth-last-child (n)

The code is as follows:

Li:nth-last-child (2) {

Color: red

}

What if I have a lot of gray li in ul and I only want the last 3 li? Instead of using li:nth-child (397), you can use nth-last-child pseudo-classes.

This technique is almost as effective as Article 6, but the difference between the two is that it is collected from the end and carried out backwards.

View examples

Compatibility

IE9+

Firefox 3.5 +

Chrome

Safari

Opera

24. X:nth-of-type (n)

The code is as follows:

Ul:nth-of-type (3) {

Border: 1px solid black

}

There should be many times when you want the element type to select the element rather than through the child.

Imagine marking five unordered lists (UL). If you want to define a third ul and do not have a unique id to find it, you can use the nth-of-type (3) pseudo class. In the above code snippet, only the third ul will have a black border.

View examples

Compatibility

IE9+

Firefox 3.5 +

Chrome

Safari

25. X:nth-last-of-type (n)

The code is as follows:

Ul:nth-last-of-type (3) {

Border: 1px solid black

}

Yes, we can also use nth-last-of-type to retrace the selector from the end to find the element we want.

Compatibility

IE9+

Firefox 3.5 +

Chrome

Safari

Opera

twenty-six。 X:first-child

The code is as follows:

Ul li:first-child {

Border-top: none

}

The pseudo-class of this structure allows us to select the first child of an element. You can usually use this method to delete the border of the first or last element.

For example, you have a series of rows, each with border-top and border-bottom. In this case, the first and last lines will look strange.

Many designers use first and last classes to make up for this deficiency. Instead, you can use these pseudo-classes to solve these problems.

View examples

Compatibility

IE7+

Firefox

Chrome

Safari

Opera

twenty-seven。 X:last-child

The code is as follows:

Ul > li:last-child {

Color: green

}

In contrast to first-child, last-child selects the last child of the parent node.

Example:

Let's create some examples to demonstrate the possible use of these classes. We will build a style to show.

Marking

The code is as follows:

List Item

List Item

List Item

Nothing special, just a simple sequence.

Css

The code is as follows:

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

}

This style sets a background, removes the padding value of the browser's default ul, and defines a border for each li to provide a little depth.

As shown in the image above, the only problem is that the top border and the bottom border look a little strange. Let's use: first-child and: last-child to solve this problem.

The code is as follows:

Li:first-child {

Border-top: none

}

Li:last-child {

Border-bottom: none

}

Look at the picture above, it's solved.

View examples

Compatibility

IE9+

Firefox

Chrome

Safari

Opera

Yes, IE8 supports first-child but not last-child.

twenty-eight。 X:only-child

The code is as follows:

Div p:only-child {

Color: red

}

To be honest, you'll probably find that you don't use only-child pseudo-classes very often. Still, it does work, and you should need it.

It can help you select elements that are the only child of the parent node (no other children). For example, using the above code, only the p paragraph of the only child of div defines its color as red.

Let's assume the following tag.

The code is as follows:

My paragraph here.

Two paragraphs total.

Two paragraphs total.

In this way, the content of the p tag of the second div will not be selected. Only the p of the first div will be selected.

View examples

Compatibility

IE9+

Firefox

Chrome

Safari

Opera

twenty-nine。 X:only-of-type

The code is as follows:

Li:only-of-type {

Font-weight: bold

}

The pseudo-class of this structure has several clever uses. It can select elements that have no sibling nodes within its parent node. For example, we can choose to have only one li as the ul of its child.

First of all, it depends on how you want to achieve this goal. You can use ul li, but this time select all li elements. The only way is to use only-of-type.

The code is as follows:

Ul > li:only-of-type {

Font-weight: bold

}

View examples

Compatibility

IE9+

Firefox 3.5 +

Chrome

Safari

Opera

thirty。 X:first-of-type

The first-of-type pseudo-class allows you to select the first sibling node of that type.

A test.

In order to better understand it, let's test it. Copy the following markup to your editor.

The code is as follows:

My paragraph here.

List Item 1

List Item 2

List Item 3

List Item 4

Now, don't rush to read on, try how to choose only 'LIST ITEM 2'? If you get it done (or give up), keep reading.

Solution 1

There are many ways to fix this test. Let's review a small part of it. Start by using first-of-type.

The code is as follows:

Ul:first-of-type > li:nth-child (2) {

Font-weight: bold

}

This code snippet essentially says, "find the first unordered list, then find the li in it, and then continue using the filter until you find the second li."

Solution 2

Another possible way is to adjoin the selector.

The code is as follows:

P + ul li:last-child {

Font-weight: bold

}

In this scenario, we find the nearby node ul of p, and then find the last child of ul's li.

Solution 3

We can choose these selectors as we like.

Ul:first-of-type li:nth-last-child (1) {

Font-weight: bold

This time, we take the first ul and find the first element, but start counting from the last. Ha ha.

View examples

Compatibility

IE9+

Firefox 3.5 +

Chrome

Safari

Opera

Conclusion

If you are still struggling to solve old browser defects, such as IE6. You still need to be very careful when using these new selectors. But don't let that stop you from learning these new things. Don't abuse yourself. Be sure to follow the compatibility list here. On the one hand, you can use Dean Edward's excellent IE9.js script to provide new selector support for old browsers. I'll go. Cool)

Second, when using javascript libraries, such as the popular jQuery, it is best to use these css3's own selectors instead of the library's custom methods / selectors as much as possible. This makes your code faster, because these selector engines themselves can be parsed by browsers instead of using these library selectors.

Thank you for reading. I hope you can learn one or two skills.

Translator's Note

This article asks the translated article, the original text is "The 30 CSS Selectors you Must Memorize"

These are the 30 css selectors you should know. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.