Home > Developer > Web Develop
This digest from: http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize/
January 2014Extra extra : Focus on the mobile side of the Fullpage.js!!! Come on, I'll check.So you learned the basics of ID, class, and descendant selectors, and then you used them all the time? If so, you lose a great deal of flexibility (CSS). Many of the selectors mentioned in this article are part of the CSS3 specification and are therefore only available in modern browsers.
1.** { margin: 0; padding: 0; }
For starters, the first thing you know about selectors before you learn more advanced selectors.
The asterisk selector will match every element in the page. Many developers use this technique to reset margins and padding to zero. While this is really good when it comes to quick testing, I recommend that you never use it in production code again. It brings a lot of unnecessary burdens to the browser.
* can also be used as a sub-selector.
#container * { border: 1px solid black;
This will match #container div each descendant element. Again, try not to use this technique.
View examples
Compatibility
#container { width: 960px; margin: auto; }
The pound prefix allows us to select the ID. This is the most common usage, but the ID selector should be used with caution.
Ask yourself again: Do I need an ID to match the element you want to select?
The ID selector is unique and is not allowed to be reused. If possible, first try using a tag name, a new HTML5 element, or even a pseudo-class.
View examples
Compatibility
.error { color: red; }
The class selector is now described. The difference between the ID and the class is that the latter can be used multiple times. You can use a class selector when you want to apply a style to a group of elements. Also, use the ID when you want to apply a style to a particular 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 give your selectors extra specificity. For example, what if you just want to match an anchor element under an unordered list? The descendant selector comes in handy at this point.
Tips-If your selector looks like this
X Y Z A B.error, you're 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, depending on their type, instead of the ID or class name? It is obvious that the type selector is used. If you need to select all of the unordered lists, please use ul {} .
View examples
Compatibility
a:link { color: red; }
We use :link pseudo-class selectors to select all anchor tags that have been clicked.
In addition, we also have :visited pseudo-class selectors, which, as you might expect, allow us to apply styles only to anchor tags that have been clicked or accessed on the page.
View examples
Compatibility
ul + p { color: red;
This is called an adjacent selector. It will only select the Y element that clings to the X element. In the above example, only the text of the ul first paragraph element after each one is red.
View examples
Compatibility
div#container > ul { border: 1px solid black; }
X YX > Ythe difference between and is that the latter only chooses direct descendants. For example, consider the following markup.
<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>
The selector #container > ul will only select the direct descendant ul of the DIV with ID container. It does not match the UL of the descendants of the deeper Li.
Therefore, the use of descendant selectors has a performance advantage. In fact, the same applies to the JavaScript engine based on the CSS selector.
View examples
Compatibility
ul ~ p { color: red; }
This is the sibling selector and the X + Y same, however, it has no constraints. The sibling selector is broader than the adjacent selector ( ul + li ), which selects only the first element following the previous selector. It will select any P element that we have above in the example above ul.
View examples
Compatibility
a[title] { color: green;
is called the attribute selector, in our example above, this will only select the anchor tag with the title attribute. Anchor labels Without this attribute will not be affected by the image. But what if you need more features? Oh......
View examples
Compatibility
a[href="http://net.tutsplus.com"] { color: #1f6053; /* nettuts green */
The above code snippet will add style to all the anchor tags with the href attribute http://net.tutsplus.com, and 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 to do this when using JavaScript's CSS selector engine. If possible, use CSS3 selectors instead of unofficial methods whenever possible.
It's a good job, but it's not flexible enough. If the link does connect directly to nettus+ OK, but perhaps the path is to nettust relative path? In this case, we can use a bit of regular expression syntax.
View examples
Compatibility
a[href*="tuts"] { color: #1f6053; /* nettuts green */
Come on Not ~ This is the code we need. The * number specifies that the value containing the attribute must contain the defined value. In other words, this code contains the HREF value nettuts.com,net.tutsplus.com or tutsplus.com.
Remember this description is too broad, if it is an anchor tag linked to a connection with tuts non-Envato site (Tutsplus belongs to the Envato site)? So you need more features to limit the start and end of strings using ^ and &, respectively.
View examples
Compatibility
a[href^="http"] { background: url(path/to/external/icon.png) no-repeat; padding-left: 10px; }
Ever wondered how some sites define a link to an icon? I'm sure you've seen it. These links make it easy for you to jump to another site.
Using the ^ (carat) character ash is often simple. This symbol often represents the beginning of a string in a regular expression. If we want to point to all the anchor points of the "href" attribute that begins with "http", we can use the code similar to the one above.
Note that we do not need to search for "http://", which is completely unnecessary because we also include links that start with https://.
What if we want to define a style for all links linked to a picture? In this case, we have to search for the end of the string is not.
View examples
Compatibility
a[href$=".jpg"] { color: red; }
Again, we use the regular expression notation, which is used $(dolor) as the end tag for the string. In this case, we will search all URLs with. jpg As the end of the anchor point. Remember to remember that in this case the GIF and PNG images will not be selected OH.
View examples
Compatibility
a[data-filetype="image"] { color: red; }
Review the latest article, how can we include a variety of picture types: Png,jpeg,jpg,gif? It's easy to think that we can go through multiple selectors instead, like this:
a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"] { color: red;
However, this is very painful, very low efficiency. Another workaround is to use a custom property. What if we add a property of our own data-filetype to each anchor point linked to the image?
<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>
Once this is associated, we can use the Standard property selector to specify these links. See below:
a[data-filetype="image"] { color: red; }
View examples
Compatibility
a[data-info~="external"] { color: red; } a[data-info~="image"] { border: 1px solid black;
Here's a little-known special trick that definitely makes you tick. ~(tilda)character, which helps us to point to elements that are separated by a space with multiple values (this is a very awkward translation I don't understand, level issues)
Take our 15th custom property as an example, in the code above we created a data-info property that defines multiple values separated by spaces. In this way, the link itself is an icon, and a link to the image, as follows.
<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>
With this appropriate tag, we can point to any of the ~ two attributes by using the property selector technique.
/* 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
input[type=radio]:checked { border: 1px solid black; }
This pseudo-class will only match the selected single element. It's that simple.
View examples
Compatibility
beforeand after pseudo-elements are also very painful. It seems that people can find or invent new ways to use them effectively every day. They are very easy to control the content around the selector.
Many of them are first used because they need to clear-fix be improved.
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; font-size: 0; height: 0; } .clearfix { *display: inline-block; _height: 1%; }
This improvement uses a :after pseudo-class element to add a space after the element and then clears it. The tip of this bull X should be in the toolkit, especially if overflow:hidden the method is powerless.
Want to see other creative uses: access to my tips for creating shadows
With the CSS3 selector's standard specification, you should use these pseudo-class syntaxes skillfully-double colons
::. However, in order to be compatible, the browser accepts a double quotation mark.
Compatibility
div:hover { background: #e3e3e3; }
I'll go, this you must understand. Typically the official form of the user triggers the pseudo-class. It may sound a little confusing, but it's not really the case. Want to define a special style when the user hovers over an element? This is what this property does.
Remember, older versions of IE can only use this hover after the anchor tag.
The most likely use of this selector is probably to add a border-bottom when the anchor is hovering.
a:hover { border-bottom: 1px solid black; }
Tip:
border-bottom:1px solid black;better than atext-decoration:underline;nice little bit. (Really?) I'll Go)
Compatibility
div:not(#container) { color: blue; }
Not pseudo-class ash is often used. For example I want to select all the div except for the ID of container. The code snippet above will be perfectly implemented.
If I want to choose all the elements except P, I can do this:
*:not(p) { color: green;
View examples
Compatibility
p::first-line { font-weight: bold; font-size: 1.2em; }
We can use pseudo-elements (as :: representations) to define the style of an element. For example, the first line, the first character, remember, this method can only be applied to sibling elements to be valid.
A 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 will find all the paragraphs and then define the first character of the paragraphs from there.
This is often used in imitation newspaper articles in the first letter style.
* * Specify the first line style of P * *
p::first-line { font-weight: bold; font-size: 1.2em;
Again, this ::first-line pseudo-element will only define the style of the first line of the paragraph, as we would expect.
View examples
Compatibility
li:nth-child(3) { color: red;
Think of the days when you can't select elements from the heap of elements. nth-childpseudo-Class solves this problem.
Note that nth-child you receive integers and variables, but not starting with 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 complete the selection of all elements in multiples of 4.
View examples
Compatibility
li:nth-last-child(2) { color: red;
If I have a lot of Gray Li in the UL, I only want the last 3 Li to do? li:nth-child(397)You can use pseudo-classes instead of using them nth-last-child .
This technique is almost as effective as the sixth one, but the difference is that it is collected from the end and is carried out in a retrospective manner.
View examples
Compatibility
ul:nth-of-type(3) { border: 1px solid black; }
There are times when you want element types to select elements instead of children.
Imagine tagging 5 unordered lists (UL). If you want to define a third UL, and you don't have a unique ID to find it, you can use nth-of-type(3) pseudo-classes. In this code snippet above, 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 it nth-last-of-type to go back to the selector from the end, to find the element we want.
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, and each one has a border-top border-bottom . In this case, the first row and the last line will look gray.
Many designers use first and last classes to compensate for this flaw. Instead, you can use these pseudo-classes to solve these problems.
View examples
Compatibility
ul > li:last-child { color: green; }
first-childinstead, last-child the last child node of the parent node is selected.
Example:
We set up some examples to demonstrate the possible use of these classes. We will create a style to show.
Mark
<ul> <li> List Item </li> <li> List Item </li> <li> List Item </li>
Nothing special, just 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, removes the default UL padding value from the browser, and defines the border to give each li a bit of depth.
As shown, the only problem is that the topmost border and the bottom border 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;
Look, it's settled.
View examples
Compatibility
Yes, IE8 supports first-child but does not support Last-child. # # 28. X:only-child # #
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's really useful, and you should need it.
It can help you choose the element that is the parent (no other child). For example, using the above code, only the P-paragraph of a div's only child will define its color as red.
Let's assume the following markup.
<div><p> My paragraph here. </p></div> <div> <p> Two paragraphs total. </p> <p> Two paragraphs total. </p>
This way, the contents of the P tag of the second Div will not be selected. Only P of the first div will be selected.
View examples
Compatibility
li:only-of-type { font-weight: bold;
The pseudo-class of this structure has several gray and often clever usages. It can select an element that does not have a sibling node within its parent node. For example, we can choose only one Li as its child's UL.
First, it depends on how you want to accomplish this goal. You can use ul li it, however, this time select all the LI elements. The only way is to use only-of-type .
ul > li:only-of-type { font-weight: bold; }
View examples
Compatibility
first-of-typeA pseudo-class lets you select the first sibling node of that type.
A test
To understand it better, let's test it out. Copy the following tags 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 and try to choose only ' LIST ITEM 2 '? If you've done (or given up), read on.
Solution 1
There are many ways to get this test done. We look back at a few of them. To start with use first-of-type .
ul:first-of-type > li:nth-child(2) { font-weight: bold;
This 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 approach is to close the selector.
p + ul li:last-child { font-weight: bold;
In this scenario, we find the near node of P UL, and then find the last child of the UL Li.
Solution 3
We can choose these selectors as we wish.
ul:first-of-type li:nth-last-child(1) { font-weight: bold; }
This time, we take the first UL, and then find the first element, but from the last start number. Ha ha.
View examples
Compatibility
If you're still struggling to fix old browser flaws, such as IE6. You still need to be very careful with these new selectors. But don't let this hinder your learning of these new gadgets. 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 your old browser. (I'll go.) Cool
Second, when using JavaScript libraries, such as popular jquery, it is best to use these CSS3 selectors instead of using the library's custom methods/selectors whenever possible. This can make your code faster, because the selector engine itself can be parsed by the browser, rather than using these library selectors.
Thanks for reading, I hope you can learn one or two skills.
Translator noteThis article asks the translation article, the original is "the CSS selectors you must memorize"
Yehai's blog was authored by Yehai and licensed under the Creative Commons Attribution-NonCommercial use-Share 4.0 International license agreement in the same way.
Based on the creation of works on http://yanhaijing.com.
Original URL: http://yanhaijing.com/css/2014/01/04/the-30-css-selectors-you-must-memorize
Thank you for reading, if you are interested in the content of my blog, please continue to follow my blog
Open Source Projects30 CSS selectors you must remember
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
