10 CSS selectors you shouldn’t code without

Default avatar.
August 06, 2013
10 CSS selectors you shouldn't code without.

thumbnailEvery time we use CSS, we use selectors. But despite this, CSS selectors are one of the more neglected parts of the specification.

We talk about the big transformations in CSS3 but all too often forget the basics. Good use of selectors makes our day-to-day coding simpler and more elegant. Today I’m going to cover the 10 selectors that often slip our minds, but are both effective and highly useful.

*

The * selector may be the one you remember most easily but it’s often underused. What it does is style everything on the page and it’s great for creating a reset and also for creating some page defaults like the font family and size you wish to have.

* {
 margin: 0;
 padding: 0;
 font-family: helvetica, arial, sans-serif;
 font-size: 16px;
}

A + B

This selector is called an adjacent selector and what it does is selects the element that is immediately after the first element. If you wanted to select the first div after our header you would type:

header + div {
 margin-top: 50px;
}

A > B

This selector will only select the direct children unlike A B that will select any level children of A. This selector is recommended for when you are working with first level children of a parent element. For example if you want to select the first level list items in an unordered list that looks like this:

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

You would use this selector because the usual A B selector will also selected the list items inside the nested unordered list

ul > li {
 background: black;
 color: white;
}

A[href*=“example”]

This is a really good selector for when you want to style a particular link in a different way, whatever is in quotes will be matched against the href of the link. For example to style all links to facebook with the color blue you would use: 

a[href*="facebook"] {
 color: blue;
}

There is also a version without the * that matches the exact url that you can use for exact links.

A:not(B)

This selector if particularly useful because of it’s negation clause that allows you to select any group of elements that do not match what you place in B. If you want to select every div except the footer you just need: 

div:not(.footer) {
 margin-bottom: 40px;
}

A:first-child /​A:last-child

The first-child and last-child allow us to select the first and last child of the parent element. This can be a great help when it comes to list items and removing the margin-right or borders. To remove the border in the first list item and the margin in the last list item you need:

ul li:first-child { 
 border: none; 
} 
ul li:last-child { 
 margin-right: 0px;
} 

A:nth-child(n)

The nth-child is a simple way for you to select any child of an element by its order. If for example you wanted the third list item in an unordered list this would be the way to go:

ul li:nth-child(3) {
 background: #ccc;
}

We can use nth-child to select every multiplier of a number by using the variable n , for example if we put 3n it would select the list item number 3, 6, 9, 12 and so forth.

A:nth-last-child(n)

The nth-last-child works like the nth-child but instead of counting form the first list item it starts counting from the last , so if you use it with the number two it will select the list item that comes before the last one and its usage is just like the nth-child selector:

ul li:nth-last-child(2) {
 background: #ccc;
}

A:nth-of-type(n)

This selector does exactly what you think it does; it sees what type of element you placed on it and it selects, for example, the third element on your page that matches what you typed. For selecting the third paragraph in a div you would use:

div p:nth-of-type(3) {
 font-style: italic;
}

A:visited

Ever noticed that when you search for something on google the pages you have already seen appear in a different color ? That is exactly what visited does. This is a great addition for the users but it’s sometimes forgotten and by my experience it’s comes in handy every time I search google.

a:visited {
 color: blue;
}

Final thoughts

In my experience using these kinds of selectors when coding can save us a lot of time and also avoid the need for a lot of ID’s cluttering up our markup. And this is just the beginning of CSS selectors, there are plenty more selectors that are really handy but sometimes forgotten.

Do you use CSS selectors in your style sheets? Is it easier to fall back on IDs and classes? Let us know in the comments.

Featured image/​thumbnail, code image via Shutterstock.

Sara Vieira

Sara Vieira is a freelance Web Designer and Developer with a passion for HTML5/​CSS3 and jQuery. You can follow her on twitter or check out her website.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…