Combining CSS Selectors

A while ago when I was helping someone fix their code, I noticed that their selectors were combined wrong. This meant that their code didn’t work properly, so the rules nested under that selector weren’t working. So, I thought I would teach whoever doesn’t know how yet how to do it through my website. Let’s get into this!

What Does it Mean?

What I mean by combining selectors is using multiple selectors to reference the same element. For example, using both the element name and a class name to reference an element. You might be wondering what the use of that is, and if you are, you might want to check out my previous posts on specificity (part 1 and part 2). Basically, it can be a way of making the selector on one element more specific. It can also be used to target specific elements based on their properties or even the order in which they are displayed!

Combining Selectors

An Element Name and a Class Name

First, let’s get started by combining some of the simple ones to get used to this a bit. I’ll also explain some of the logic behind how the combination rules work.
To combine an element and a class name, we have to put the element name first, then the class name right after it without leaving a space. Here is an example:

h1.title {
    /* rules here */
}

This would apply to this bit of HTML code:

<h1 class="title">A Verra Verra Interesting Title</h1>

The element name has to go first, because if it would go afterwards, it would behave like part of the class name. Secondly, there has to be no space between them if they are referencing the same element, otherwise it would look for an element with a class name of title nested within an h1. That is not what we want, because then the rules won’t apply the way we want them to again.

An Element Name and an ID

You can also do pretty much the exact same thing with an ID – it would read like this:

h1#title {
    /* rules here */
}

You will have noticed that it is very similar – you are just combining it with an ID selector instead of a class. This will help make it more specific yet.

A Class Name and an ID

You don’t have to have the element name in there – you can also combine any other kind of selector. Here is an example of a class name used together with an ID:

.class-name#id {
    /* rules here */
}

Other types of selectors

Here is an example of an awful lot of different selectors being used to target an element:

h1.header#title:nth-of-type(odd):first-child:hover {
    /* do something crazy */
}

I’m not sure when you would ever need that selector, but it just goes to show your combining powers.

Thanks for reading! Please post any questions or comments… I will respond.

2 thoughts on “Combining CSS Selectors

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>