Original subtitles

In the last lesson, we looked at how the CSS cascade works when there are multiple rules that conflict

with each other.

But in this lesson, we're going to focus more on how to combine different CSS selectors so that we

can target a very specific element in our website in order to apply our style. From the previous coding

exercise, you might have remembered that there is a part where we had a paragraph element that we wanted

to be yellow and another paragraph element that we wanted to be white.

When we apply the CSS style to target all of the P tags and we give it a particular color, then what's

going to happen is everything that is a paragraph tag is going to be turned yellow.

In our case, we changed this white text by giving this paragraph tag a specific class which we set to

"white-text".

Now, you can imagine if you had lots of different things in your website and they all had different

color requirements,

you can't go around setting each one with a different class, right?

That would be a lot of work and a lot of clutter in your HTML.

So what can we do instead?

Well, we can combine different selectors in order to select something specific.

So in this case, notice that the paragraph that we want to set to color white happens to live inside

a different div and this div already has a different class.

It has "box", but it also has "inner-box".

And in our case, we only wanted the text in the "inner-box" right here, to be turned into white.

So we can use that piece of information and combine these two things in order to select a specific element.

What this rule does is it first looks at the elements with this particular class, and then it looks

at any of the descendants of that class,

so anywhere inside that div could be one level down, it could be three levels deep,

as long as it's enclosed inside the div, it counts as a descendant and we're looking for a paragraph

element.

And once we found that, then that is the one that's going to get a white color.

And now when we run this code, you'll notice that even though we haven't added any new classes to this

paragraph element, it has been specifically selected using this combined selector right here, turning

the text white.

There are different ways that we can combine CSS selectors and I want to show you some of these different

rules.

The first one is the group rule, and this is done using a comma.

You can have one selector here and then another selector

and to separate them, we've got this comma and a space

and what the grouping does is it selects both of the selectors or even more, 2 or 3 different selectors

and applies the same style to the entire group.

So everything that's selected now, we're going to try and apply what we just learned grouping selectors

in order to have the preview of our index.html look like this.

We want both the h1 and h2 to have a color of blueviolet.

Let's put this into practice by going to the current lesson, downloading the starting files as a zipped

file, extracting it and opening it in VS Code.

Once you've extracted the files, I want you to first go into the index.html file and I want you to

take a look at the structure of the starting file.

It's really important for any of the upcoming challenges that you don't change any of the HTML code.

So don't add any extra classes, don't add any IDs,

basically don't touch this entire index.html file.

Instead, you're going to be writing all of your code inside the style.css and you're going to be using

CSS and more specifically, the different combinations of CSS selectors in order to carry out the challenge

goals.

As you might remember, the first goal that we're trying to achieve is to target both the h1 and the

h2 and make sure that they both have a blueviolet text color and we're going to group our selectors

to achieve this.

Pause the video and write your code inside the style.css

to complete the challenge.

All right.

So remember to group a selector.

We first write a selector, and then we add a comma,

and then we add the second group of selectors.

Now, in this case, I'm using the element selector, but it could be that you're grouping different

classes, you could be grouping different IDs,

it doesn't really matter as long as you're aware that you have two different selectors separated by

a comma.

Here, we're going to change the color to a blueviolet color.

And once I've done that, you can see we've got these two bits, both with the same CSS applied to it.

And this can be really handy when you're trying to save some time targeting different areas of your

website.

All right, let's look at some other different combiners.

Now we can use the right angle bracket (>) in order to select a child of another selector.

So in this case, the first selector is the parent and the second selector is the child.

What this means is that if we had a div where it opens here and it closes here, then inside here a

direct descendant,

so just one level down, we might have a child.

Let's say it's another div.

Well this then is the parent, and this is the child.

And the important thing is that this relationship is only one generation deep. In this case, when we

want to select this particular div, then we can use this method by putting the parent the right angle

bracket and then the child selector in order to select this particular element.

And the most important thing to remember here is that it's a direct child.

It's not a grandchild, not a great grandchild,

it has to be only one level nested inside. This selector has to be only one level inside this one.

All right, let's try a practice run.

Use this selector in order to change the index.html, to set the first paragraph tag to a firebrick

color.

This is what you want your preview to look like.

The next goal is to change the color of this paragraph element to a firebrick color.

And in order to do this we have to again study how we can select it specifically.

Now, notice here that it's got a class of "done", but so do other things.

It's got a paragraph element, but there are also other paragraph elements on screen.

I want you to use what you've learned about the child selector in order to select this particular element

and change its color.

Pause the video now and give this a go.

All right.

So we mentioned that a child selector allows us to choose a parent and then specify something that is

one level deep.

So in this case, if this div was the parent, then you can see it has two child-elements.

One is this paragraph and another is the ul.

Whereas these li's, for example, they would not be children elements, they're actually grandchildren.

Let's use what we learnt in order to target this particular paragraph

tag. In English,

what our rule is going to specify is, "Select the thing that has a class of "box", and look at its children

and find a paragraph element."

This way we distinguish this paragraph element from this one because it's not inside a div called "box".

It doesn't have a parent with that class,

and also similar with this paragraph, it also doesn't have a parent that has a class of "box".

So let's go in here.

Let's first select our parent using the selector for a class and then using the right angle bracket,

we're going to say, let's look for a direct descendant

that is a paragraph element and then let's set the color to a firebrick.

You can see here we've managed to set this particular paragraph's color to firebrick, but left these

other paragraphs alone.

The next combination we want to look at is the descendant combination.

Here we've got two selectors,

this is the ancestor and this is the descendant.

So notice that here all we've got is a single space between the two selectors.

And what this means is that our descendant selector is going to apply the style to this descendant as

long as it has an ancestor that matches this selector.

So that means that you can have many, many levels deep.

For example, you could have a class here, you could have a different class here, and then maybe you

have a paragraph element in here.

So then you can specify the left hand selector to select on this particular class.

And as long as somewhere within its enclosing brackets there is a paragraph element, then this will

be a valid descendant to select and apply your styles to.

Let's try this out in code.

What we want to do is we're going to try and select these three bullets here and give them a blue color,

and we're going to use the descendant combination. In order to select these three here,

if we look at the index.html, you can see that we've clearly got three list-item elements,

I don't want you to select on the list-item.

We're going to practice using the descendant selector instead, make sure that you use the descendant

combination in order to select these three items.

And I want you to imagine that maybe there are other list item elements in the rest of the website and

we don't want to style them the same as what we've got here.

So we're trying to turn the text blue just for these three bullet points and we're not selecting on

the list-item element.

We're instead using the descendant selectors.

Pause the video and give that a go.

All right.

So as I mentioned previously, the easiest thing here would of course, be simply to select all the

li's.

But this is a very short website.

Now imagine that your whole website is 2000 lines long,

there probably will be a lot of other li elements that you don't want to select on and apply this style.

That's why we're going to use a descendant selector.

Also, it's good practice for our learning.

So in this case, notice that the li's are a grandchild of this div, so we can simply select the

box class and then use a space to say, let's find all the descendants that are li and change their

color to blue.

And that changes these three bullets.

And notice because of this rule, it means that if I have any other li's down here, then they don't

get affected at all because my rule is very specific.

And also notice how in this case, if I use the child selector, it's actually not going to work because

the li is two levels deep relative to this div that we're selecting.

So we could select on the parent which has the class, "list", but if we wanted to use the descendant selector

then we would have to use "box" as a class and then select all the li's that are a descendant using

this syntax.

The next method I want to talk about is chaining selectors.

And this looks really similar to the previous one where we had descendant selectors.

So it's really important to pay attention here.

When you chain a selector, effectively what you're doing is you're saying apply these styles to the

instances where all the selectors are true.

If we look at the way that we chain selectors, you can see we've got a selector and then we immediately

add another selector.

There is no space in between the two selectors whatsoever.

So what this might look like is let's say you had an h1 and this h1 also has some other attributes,

maybe it's got an ID of "title",

maybe it's also got a class that's equal to "big" and "heading".

It's got two classes applied, one ID, and it's also an h1 element.

If we had a whole bunch of other elements in our code which also had the same ID or the same class,

then we can use this chaining method to be really, really specific.

That is the purpose of chaining. In order to get hold of this particular h1, we could say we're looking

for an h1 and then without any spaces we add immediately, say a pound sign to select on the ID of

"title",

now the selector says look for an h1 that also has an ID of "title" and then we can even add on another

one.

So we could say it also has the class of "big" and it also has the class of "heading".

Now we have a super, super specific selector where we've chained all of these selectors together to

apply to just one single element.

Now, there could be many h1's,

there shouldn't be, but there could.

There could be many elements with the same ID again, there shouldn't be, but it could happen.

But more commonly, there probably will be many elements with the same class, but maybe there won't

be an element with both of these classes.

So remember you chain selectors by having no space between the selectors and your selector includes

that symbol at the beginning.

So it could be dot (.) for classes, it could be the pound sign (#) for IDs and it could have nothing in front

where it's just the element.

In the case of the element, if you're trying to chain this selector with anything else, this has to

go first, because otherwise it can be really confusing.

Let's say you had a class of "big" and you wanted to say, well it also is an h1, because there's no

space when we chain,

this might just look like a class called "bigh1", which is not what you want.

Always, always start off with the element,

if you want to chain an element and then you can add on the class using any sort of dot or you could

use the pound sign to add any sort of ID and remember leave no spaces in between

if you want to say that all of these selectors are in a single element.

And this is to differentiate when you say want to use the descendant selector, where you say that I'm

looking for something that has this particular class, but it also has a parent which is an h1, this

is when you're looking for the descendant combination.

So now your challenge is to figure out how to only select these two bullet points in order to turn them

into the seagreen color that you see right here.

These are the two items that we want to select.

So we could go for the class, which is "done",

but notice that there's other items with the class "done" and we can't change the HTML code.

How can we use this chaining method in order to get hold of these two items?

Well, notice what's very specific about this.

These are list-item elements that have this particular class.

We can't select on all the list items and we can't select on all the ones with a class of "done",

but we can chain these two selectors together using what we just learned.

Pause the video and try to make these two bullets a color of seagreen.

All right.

So we're going to chain these two selectors.

We're going to look for all the list-item elements that have the class "done" to differentiate between

paragraph elements that have a class of "done" and this list-item element that doesn't have the class

"done" and make it really, really specific,

so we select just these two list-item elements.

So first we select the element, which is list-item element.

And remember, there's no space between the two selectors when we want to chain, and the second selector

is the class selector of "done." We're going to change the color to seagreen, like this.

Now remember that when we're chaining selectors, you can imagine that if we have first had the class

selector and then we add the list-item element, it thinks that we're looking for a class called ".doneli",

which doesn't make any sense at all. Because our IDs and our class selectors have a special symbol,

we always start off by selecting on the element and then we add the other selectors.

You can add it in order, it could be ".done", and then you can add an ID, or you can select on the ID

first and then the class.

It doesn't really matter as long as the first item in the chain is your element.

Now, the final thing I want to mention is we've looked at different ways of combining selectors, but

remember that we can also combine these different combinations together.

It gets a little bit more complex this way, but just in case you see it out in the world, I wanted

to quickly explain this.

So imagine if you wanted to select on something that has an ancestor that matches this selector, but

then you use the chaining method in order to specifically select this item with these two selectors,

then you can combine all of this together and add that space in there and remove that space in there

or use the group and you can combine lots of different combinations.

Let's try this out and target this particular item right here and give it a font size of 0.5rem.

So it's much smaller than everything else on screen.

And if you look at the code, it's a little bit tricky because this is a paragraph element that has

a class of "done", but there's also the same one up here.

But we don't want to select this one,

we just want this one and we want to set its font size to 0.5rem.

So use what you learned and try out the different combinations in order to achieve that

to make this a tiny font size.

Pause the video,

give that a go.

All right.

What is different about this element and this element?

Well, it's the fact that this one is inside a ul, whereas this one is inside a div.

Normally inside a ul, you would see list-item elements,

but in this case, just for the example's sake, we've put in a paragraph element which is totally valid

as well, because you might have list elements that come up afterwards and it could just be a line inside

the unordered list.

So now in order to select it, we're going to find a parent of ul that has a paragraph element that

has a class of "done".

Let's do that here.

So a ul as the ancestor and then a paragraph element and then a class of "done" and we set the font-size

to 0.5rem and you can see that's achieved this.

Now the other way of doing this is of course using the child selector, which does the same thing right

here, because it is an ancestor and it's also a parent in this case.

So normally, unless you're sure that you only want the parent child relationship, I prefer to use

the descendant selector because it's just a little bit more broad stroke,

and normally you'll want to apply your style to multiple things that apply to that same rule.

But both of these options are totally valid solutions, and I would consider you completely correct

if you did either of them.

The important thing for you to understand here is we've got an ancestor selector,

we're using the space in order to say that this is the ancestor,

this is not what we actually want to change the style to,

but we're also using the chaining method to say, "This is quite specific, and this is what we want to target."

And notice that when you hover over these selectors, you actually see which element it's selecting as

well, which can be really handy sometimes.

Hopefully this has given you a little bit of insight into how different CSS selectors can be combined

together in order to target specific things on screen.

In the next lesson, we're going to look at the CSS position property so that we can learn more about

how the positioning of items works in CSS.

So for all of that and more, I'll see you there.