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

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…