Grouping and Nesting CSS Selectors

Grouping and Nesting CSS Selectors
udemy placeholder image

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 using grouping and nesting.

Grouping

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:

	
	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.

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

Look how much shorter that is!

Nesting

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.

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.

	
	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 selectors at the same time:

	
	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:

	
	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 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:

	
	<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 selector to say "hey, I want to style only the paragraph tag right after my header":

	
	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.

Feel free to experiment with this, and keep in mind that you can mix and match these selectors. In our next one, we'll take a look at pseudo classes and elements!