Grouping and Nesting CSS Selectors

When you start to write bigger and bigger HTML files, and your CSS styles start to become longer and longer, it might be worth looking into if you can shorten and simplify them a bit by grouping CSS selectors and nesting CSS selectors.

Grouping CSS Selectors

The easiest way to identify where you might be able to group selectors in one line is to see where you have repetition in your styles.

For example, let's say these are your current styles:

CSS
h1 {
    color: darkgray;
}

h2 {
    color: darkgray;
}

.highlight {
    color: darkgray;
}

Instead of writing those three selectors, you can group them into a single line.

To group them, all you need to do is separate them with a comma, and the styles inside will get applied to them all. For example:

CSS
h1, h2, .highlight {
    color: darkgray;
}

Look how much shorter that is! Now you can apply the same styles to multiple elements at once.

Nesting CSS Selectors

Just like in HTML where you can have elements nested inside other elements, the same can be done in CSS. There are cases where you might want to style elements differently depending on what they are nested inside of. This is where nesting comes in handy.

Descendant Selector

When you want to target elements that are inside another element, you can use the descendant selector, also known as the descendant selector.

Let's say you have a paragraph tag inside your main content and also one in your footer, but you want the footer's font size to be smaller.

You can simply target paragraph tags inside main differently than you would paragraph tags inside footer by nesting the paragraph tag inside its parent.

For example:

CSS
main p {
    font-size: 1rem;
}

footer p {
    font-size: 0.75rem;
}

It's that simple. To nest a selector, you simply separate them with a space.

But what if you had a third paragraph tag in the header, and also wanted it to be the same font size of the footer? Well, you can both group and nest CSS selectors at the same time:

CSS
main p {
    font-size: 1rem;
}

header p, footer p {
    font-size: 0.75rem;
}

This will make paragraph tags inside main have one font size, and paragraph tags inside either header or footer have another font size.

Descendant selectors target all elements inside the other, no matter how deeply nested it is.

But what if you don't want this, and only want to target the direct children instead?

Child Selector

For the cases where you only want to target direct children (nested only one level under), you can use a child selector. Instead of using a space, you use a greater-than character to specify direct children:

CSS
main > p {
    font-size: 1rem;
}

header > p {
    font-size: 0.75rem;
}

If you had those paragraphs tags first nested inside a div tag, neither styles would apply because they wouldn't be direct children of main or header.

Adjacent Sibling Selector

There will sometimes be cases where you want to target an element based on whether or not it came right after another element.

Let's say you wanted the first paragraph after every h1 tag to be in a larger font size:

HTML
<h1>I am a header</h1>
<p>I am paragraph #1</p>
<p>I am paragraph #2</p>
<p>I am paragraph #3</p>

You can use an adjacent sibling selector to say "hey, I want to style only the paragraph tag right after my header":

CSS
h1 + p {
    font-size: 125%;
}

Now your first paragraph will be in a larger font, but the following paragraphs will be in their usual font size. This is useful for when you want to style the next element in a list, or the next element in a row.

To use an adjacent sibling selector, you need to specify the element you want to target, and then the element you want to target it after, then a plus sign.

General Sibling Selector

General sibling selectors are similar to adjacent selectors, but instead of targeting the element right after the target element, they target all elements that come after the target element.

Let's say you wanted to style all paragraphs after an h1:

HTML
<p>I am paragraph #1</p>
<h1>I am a header</h1>
<p>I am paragraph #2</p>
<p>I am paragraph #3</p>

CSS
h1 ~ p {
    font-size: 125%;
}

This will make all paragraphs after the header be in a larger font, but the paragraphs before the header will be in their usual font size. This is useful for when you want to style all elements after a certain element, but not the element itself.

Try out the demo for yourself:

Resources

• CSS Selectors - MDN Web Docs

• Support Us
• Discord
• Share
• Post
• Share