CSS descendant selectors

{'type': u'plain'}

Let's move on from donuts to carrots, one of the healthiest foods in the world.

Plus the favorite food of rabbits.

Did you know that carrots aren't just orange?

They were actually originally purple. Some of them still are today.

We have this short webpage here with a list of carrot colors and a sentence about their purple origins.

And we've used classes to style the color names to the appropriate color.

I like how the styles look in the list, but I'm not sure I like how the "purple" style looks in the text.

I think I'd rather not use a background color, and go for more subtle coloring there.

How could I tell the browser to style the purple text here differently than the purple text here?

Well, they have the same class names, so we can't use class unless we introduce a new class name.

They also have the same tag name-- they're both s.

So we can't use the element-plus-class-name selector that we just learned.

Is there anything else different about them?

Well, one thing is that this is inside an ,

whereas this is inside a .

So the difference is their parent tags-- the tags that are above them.

We can use this information to make a CSS rule, using what's called a "descendant selector"--

a way of selecting elements based on their position in the document.

For example, to select only the purple inside the paragraph

we'll write "p", and then a space-- the space is really important--

and then the class name-- dot purple--

and now we'll add our properties that will give us the more subtle coloring--

background-color, transparent, override what it was before.

Okay, nice. So we've affected this purple text without also affecting this purple text.

And now any time we use the purple class inside a paragraph like this,

it'll get those styles applied after.

We can use that space to dig deep into our document.

Let's say we want to apply a styling just to tags that are in s.

We start with the parent tag-- -- and then the space, and then .

And maybe we'll give them a different line height to space them out more.

Nice. We can even add a in front of the if we wanted,

to make sure it didn't apply to s inside an .

You see, to use descendant selectors, we need to think hard about the structure of our document

And what tags are inside other tags.

If you're indenting nicely, then that should be easy to do

because your indentation will reflect the hierarchy of tags.

See, we have this , and indented inside that we have an ,

and inside that we have the .

If you're not indenting nicely, well, fix that up now

because it'll make it much easier for you to understand the structure of your page

and to come up with CSS selectors based on that structure.

You can use that space between any kinds of selectors.

Like finding a particular tag type under an element that has a certain id,

or finding a particular id under elements with a particular class name,

any combination that you need to use.

The thing to remember is that if the structure of your page changes, then your old CSS rules might not apply.

So think carefully when you use them, and how future-proof your CSS will be.

You could always use classes if you want to be less dependent on the structure of your page.

Let's look back at the rules I created and think through them.

This first rule styles all the purple class elements inside paragraphs a certain way.

If I add in new paragraphs with purple class elements in the future, would I want them to get that property?

Yes, because I think that those properties will always look the best in the paragraph.

Do I need a more specific rule?

Well, maybe if these paragraph were always inside some element with class name "article", I could add that to the rule.

But for now, this is the most specific I can be.

The second rule gives all the elements inside list items a certain line height.

Do I always want strong items inside s to have that increased line height?

Hm, maybe not. This rule might be too generic.

Since I'm not sure, I will add a class to this

and then change this one so it's "ul.spacey"

which makes it much more specific.

In the future, as my webpage grows, I might make the rule more or less specific.

Stick this tool in your ever-growing CSS toolbox

and practice it, so you can use it when it makes sense.