30 CSS delimiters you must remember and 30CSS delimiters
So you learned the basic id, class, and descendant selector, and then you keep using them? If so, you will lose the huge flexibility (css. Many selectors mentioned in this article are part of the CSS3 specification. Therefore, they are only available in modern browsers.
1 .** { margin: 0; padding: 0; }
The selector that Beginners first understand before learning more advanced selectors.
The asterisk selector matches every element on the page. Many developers use this technique to reset the outer and inner margins to zero. Although this is really useful During Quick testing, I suggest you never use it in code reproduction. It brings a lot of unnecessary burden to the browser.
* It can also be used as a sub-selector.
#container * { border: 1px solid black; }
This will match each descendant element of # container div. Again, try not to use this technology.
View examples
Compatibility
#container { width: 960px; margin: auto; }
The prefix of the well number allows us to select the id. This is the most common usage, but you should use the ID selector with caution.
I repeatedly asked myself: Do I Need id to match the element to be selected?
The id selector is unique and cannot be reused. If possible, first try to use a tag name, a new HTML5 element, or even a pseudo class.
View examples
Compatibility
.error { color: red; }
This section describes the class selector. The difference between id and class is that the latter can be used multiple times. When you want to apply a style to a group of elements, you can use the class selector. In addition, id is used only when you want to apply a style to a special element.
View examples
Compatibility
li a { text-decoration: none; }
The next most common selector is the descendant selector. You can use it when you need to add special characters to your selection. For example, if you only want to match the unordered anchor element in the unordered list? In this case, the descendant selection character is used.
Tips-if your selection operator looks like x y z a B. error, you will be wrong. Always ask yourself if it is necessary to use this high weight.
View examples
Compatibility
a { color: red; } ul { margin-left: 0; }
If you want to match all the elements on the page, according to their type, instead of id or class name? Obviously, use the type selector. If you want to select all Unordered Lists, use ul {}.
View examples
Compatibility
a:link { color: red; } a:visited { color: purple; }
We use the link pseudo-class selector to select all the anchored labels that have been clicked.
In addition, we also have the visited pseudo-class selector, which, as you expected, allows us to apply the style to only the clicked or accessed anchor labels on the page.
View examples
Compatibility
ul + p { color: red; }
This is called an adjacent selector. It only selects the yelement following the X element. In the above example, only the text of the first paragraph element after each ul is red.
View examples
Compatibility
div#container > ul { border: 1px solid black; }
The difference between x y and X> Y is that the latter only selects direct child. For example, consider the following tag.
<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>
The selector # container> ul selects only the direct child ul of the div whose id is container. It does not match the ul of the deeper li child.
Therefore, using the child selector has the performance advantage. In fact, this applies to the javascript engine based on the css selector.
View examples
Compatibility
ul ~ p { color: red; }
This is the same as the sibling selector X + Y. However, it has no constraints. Compared with the adjacent selector (ul + li) that only selects the first element after the previous selector, the sibling selector is wider. It will select any p element after ul in the above example.
View examples
Compatibility
a[title] { color: green; }
This is called the attribute selector. In the preceding example, only the anchor tag with the title attribute is selected. The anchor tag without this attribute is not associated with the image. But what if you need more features? Haha ......
View examples
Compatibility
a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */ }
The code snippet above will add styles to all href attributes for the http://net.tutsplus.com's anchor labels; they will be displayed as our brand green. All other anchor labels will not be affected.
Note that we enclose the href value in quotation marks. Remember, this is also done when javascript css selector engine is used. If possible, use the css3 selector instead of the unofficial method.
This is a good job, but it is not flexible enough. If the link is actually directly connected to Nettus +, but maybe the path is the relative path to nettust? In this case, we can use a little regular expression syntax.
View examples
Compatibility
a[href*="tuts"] { color: #1f6053; /* nettuts green */ }
No ~ This is the code we need. * Indicates that the value containing this attribute must contain the defined value. That is to say, this Code contains the href value nettuts.com, net.tutsplus.com or tutsplus.com.
Remember that this description is too broad. If an anchor tag is used to link to a website with a non-Envato tuts in a connection (tutsplus belongs to the website of Envato? Therefore, you need more features to limit the start and end of the string by using ^ and & respectively.
View examples
Compatibility
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 have seen it. These links can easily redirect you to another website.
It is often easy to use the ^ (carat) character. This symbol often indicates the start of a string in a regular expression. If we want to point to all the "href" attributes starting with "http", we can use the code similar to the above.
Note that we do not need to search for "http: //", because we still need to include links starting with https.
What if we want to define styles for all links linked to images? In this case, we have to search for the end of the string, no.
View examples
Compatibility
a[href$=".jpg"] { color: red; }
Again, we still use the regular expression symbol $ (dolor) as the end mark of the string. In this situation, we will search for all the URLs ending with .jpg. Remember that in this case, images in gif and png formats will not be selected.
View examples
Compatibility
a[data-filetype="image"] { color: red; }
Looking back at the latest article, how can we include various image types: png, jpeg, jpg, and gif? It is easy to think that we can not use too many selectors, like this:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red; }
However, the efficiency is extremely low. Another solution is to use custom attributes. What if we add our own data-filetype attribute to each anchor linked to an image?
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
In this way, we can use the standard attribute selector to specify these links. See the following:
a[data-filetype="image"] { color: red; }
View examples
Compatibility
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black; }
Here is a little-known special technique that will definitely impress you .~ (Tilda), which can help us to point to the elements of the attributes that are separated by spaces with multiple values (the real interface, which I do not understand, horizontal problem)
Take the 15th custom attributes as an example. In the code above, we created the data-info attribute, which can define multiple values separated by spaces. In this way, the link itself is an icon and points to an image link, as shown below.
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
With such an appropriate tag, you can use ~ The attribute selector technique allows us to point to any one with two 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; }
Great, isn't it?
View examples
Compatibility
input[type=radio]:checked { border: 1px solid black; }
This type of pseudo-class matches only selected single-choice elements. That's simple.
View examples
Compatibility
The before and after pseudo classes are also very painful. It seems that people can find or invent new ways to use them effectively every day. They easily control the content around the selector.
Many of the first uses are because they need to improve the clear-fix.
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
This improvement uses the "after" pseudo-class element to add a space after the element and then clear it. You should add this tip to your toolkit, especially when the overflow: hidden method is powerless.
Want to see other creative usage: visit my tips for creating shadows
With the Standard Specification of the Css3 selector, You Should skillfully use these pseudo-class syntaxes-double colons ::. However, for compatibility purposes, the browser will accept a double quotation mark.
Compatibility
div:hover { background: #e3e3e3; }
You must understand this. A typical official form of user-triggered pseudo-class. It sounds a bit confusing, but not actually. Want to define a special style when you hover over an element? This attribute is used.
Remember, older IE versions can only use this hover after the anchor tag.
This selector is the most widely used. It is estimated that a border-bottom will be added when the anchor is hovering over the anchor.
a:hover { border-bottom: 1px solid black; }
Tip: border-bottom: 1px solid black; better than text-decoration: underline. (True? I am going)
Compatibility
div:not(#container) { color: blue; }
Not pseudo classes are often useful. For example, I want to select all divs except for those with the id container. The code snippet above can be perfectly implemented.
If I want to select all elements except p, I can do this:
*:not(p) { color: green; }
View examples
Compatibility
21. X: pseudo element
p::first-line { font-weight: bold; font-size: 1.2em; }
We can use a pseudo element (represented by:) to define the element style. For example, the first line, the first character, remember, this method can only be applied to the same level element.
The pseudo element consists of two colons :::
Specifies the style of the first character of p
p::first-letter { float: left; font-size: 2em; font-weight: bold; font-family: cursive; padding-right: 2px; }
This code finds all paragraphs and then defines the first character of these paragraphs.
This style is often used in the first letter of a newspaper-like article.
Specify the first line style of p
p::first-line { font-weight: bold; font-size: 1.2em; }
Similarly, the: first-line pseudo element defines the style of the first line of a paragraph as we expected.
View examples
Compatibility
li:nth-child(3) { color: red; }
Think about the days when elements cannot be selected from the Element Heap. The nth-child pseudo class solves this problem.
Note that nth-child receives integers and variables, but not from 0. If you want to select the second li, use li: nth-child (2 ).
We even use this method to select any child element. For example, we can use li: nth-child (4n) to select all elements whose 4 is a multiple.
View examples
Compatibility
li:nth-last-child(2) { color: red; }
What if I only want the last three li addresses if I have a lot of li in ul? Without using li: nth-child (397), you can use the nth-last-child pseudo class.
This technique is almost as effective as article 6, but the difference between the two is that it starts to collect data from the end and uses backtracking.
View examples
Compatibility
ul:nth-of-type(3) { border: 1px solid black; }
There are many times when you want element types to select elements instead of using children.
Imagine marking five Unordered Lists (UL ). If you want to define the third ul without a unique id, you can use the nth-of-type (3) pseudo class. In the above Code segment, only the third ul will have a black border.
View examples
Compatibility
ul:nth-last-of-type(3) { border: 1px solid black; }
Yes, we can use nth-last-of-type to trace the selector from the end to find the desired element.
Compatibility
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 of which includes border-top and border-bottom. In this case, the first line and the last line seem quite cool.
Many designers use the first and last classes to make up for this defect. Instead, you can use these pseudo classes to solve these problems.
View examples
Compatibility
ul > li:last-child { color: green; }
Opposite to first-child, last-child selects the last child node of the parent node.
Example:
Let's create some examples to demonstrate the possible usage of these classes. We will establish a style for presentation.
Mark
<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li> </ul>
Nothing special, it is a simple sequence.
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; }
This style sets a background, deletes the default ul padding value of the browser, and defines the border for each li to provide a little depth.
As shown in, the only problem is that the top and bottom borders look a bit strange. Let's use: first-child and: last-child to solve this problem.
li:first-child { border-top: none; } li:last-child { border-bottom: none; }
See. No.
View examples
Compatibility
Yes. IE8 supports first-child, but does not support last-child.
28. X: only-childdiv p:only-child { color: red; }
To be honest, you may find that you do not often use the only-child pseudo class. Even so, it is actually useful and you should need it.
It helps you select an element that is the only child of the parent node (no other child. For example, using the above Code, only the p section of the only child of the div defines its color as red.
Let's assume the following mark.
<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p> </div>
In this way, the content of the p tag of the second div is not selected. Only the p of the first div is selected.
View examples
Compatibility
li:only-of-type { font-weight: bold; }
This structure has several clever usage pseudo classes. It can select elements without sibling nodes in its parent node. For example, we can select only one li as the ul of our children.
First, it depends on how you want to accomplish this goal. You can use ul li. However, this time all li elements are selected. The only method is to use only-of-type.
ul > li:only-of-type { font-weight: bold; }
View examples
Compatibility
The first-of-type pseudo-class allows you to select the first sibling node of this type.
One test
To better understand it, let's test it. Copy the following tag to your editor.
<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, don't rush to read down. Try again how to select 'list ITEM 2' only '? If you get it done (or give up), continue reading.
Solution 1
There are many ways to deal with this test. We will review a small part of it. Start with "first-of-type.
ul:first-of-type > li:nth-child(2) { font-weight: bold; }
This code segment essentially indicates, "find the first unordered list, find the li here, and then continue to use the filter until the second li is found.
Solution 2
Another feasible method is to adjacent the selector.
p + ul li:last-child { font-weight: bold; }
In this solution, we find the adjacent node ul of p, and then find the last child of ul's li.
Solution 3
We can select these selectors as needed.
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
This time, we get the first ul and find the first element, but the number starts from the last one. Haha.
View examples
Compatibility
If you are still struggling to solve the defects of the old browser, such as ie6. You still need to be very careful when using these new selectors. But don't get in the way of learning these new things. Do not abuse yourself. Check the compatibility list. On the one hand, you can use Dean Edward's excellent IE9.js script to provide new selector support for old browsers. (I will go. Cool)
Second, when using javascript libraries, such as popular jQuery, it is best to use the selector of these css3 as much as possible instead of using the library's custom method/selector. This can make your code faster, because these selector engines can be parsed by browsers rather than using these library selectors.
Thanks for reading. I hope you can learn one or two tips.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
