Scribd
Upload
376 views12 pages

Grouping and Nesting CSS Selectors

Grouping CSS selectors allows applying the same styles to multiple selectors by separating them with commas. Nesting CSS selectors targets elements differently depending on their parent element by separating selectors with spaces. This allows targeting elements inside specific parents like paragraphs inside main content versus paragraphs inside headers or footers. Child selectors use ">" to target only direct children, while adjacent selectors use "+" to target elements directly after another element.

Uploaded by

Romiet Carmelo Mendoza Capuz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
376 views12 pages

Grouping and Nesting CSS Selectors

Grouping CSS selectors allows applying the same styles to multiple selectors by separating them with commas. Nesting CSS selectors targets elements differently depending on their parent element by separating selectors with spaces. This allows targeting elements inside specific parents like paragraphs inside main content versus paragraphs inside headers or footers. Child selectors use ">" to target only direct children, while adjacent selectors use "+" to target elements directly after another element.

Uploaded by

Romiet Carmelo Mendoza Capuz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

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


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.

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

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

Now your first paragraph will be in a larger font, but the following
paragraphs will be in their usual font size.
END

You might also like