All right. 1
So as promised we're going to talk about how you can pick and mix your CSS selectors. 2
So one of my favorite childhood pastimes, picking and mixing sweets, until the dentist told me to stop, 3
otherwise he's going to pull out all my teeth. 4
So, dental horrors aside, let's talk about how you can combine different CSS selectors in order to apply 5
styles more specifically. 6
Now the first type is the easiest to understand and we've seen this when we combined all of our different 7
heading types, h1 through to h6, and applied the font-family Montserrat-Bold to all of these HTML 8
elements on our web page. 9
So the idea here is that you write one selector, you add a comma and then a space, and then the next selector. 10
So the space in this case is actually optional but it's quite nice to space it up just so that you can 11
see it more clearly. 12
But, later on, as we'll see in other cases, the spacing is really important, but when you're combining multiple 13
selectors it's not a big deal. 14
So selector1, selector2. 15
That's a good style to follow. 16
Now, the way that it works is, say that we have an h1 and a paragraph, and we want to apply the same color 17
to the text in both cases. 18
Then we can either write out you know this long winded approach of h1 color red, p color red, or we 19
can simply combine it by writing h1, p. 20
And in this case we're applying the color red to both of these elements. 21
And this is just a way of shortening your code and grouping similar things together. 22
You're going to see this most commonly at the HTML element level, and it's mostly for things like h1 through 23
to h6. 24
But this is very very simple. 25
Now it gets a little bit more complicated when we start talking about hierarchical selectors, and that's 26
because in order to use this properly we have to understand how the HTML is structured. 27
So in our case we wrote this code that targeted the container-fluid class that is inside something that 28
has the id of title, and we gave it a different padding. 29
The syntax here looks like this. 30
So you have selector1, then you have a space then you have selector2. 31
And this is what I was talking about earlier on. Spacing 32
in this case is crucial. 33
You should have one space and the order is that the first selector is from the parent and the second selector 34
is from the child. 35
So let's take a look at this in more detail so that we can really get to grips with it. 36
So in this case I've got a div that has a class of container-fluid, 37
and I also have an h1 that has the id of title. 38
So if we had some code that was written like this then this is a hierarchical combination of selectors. 39
So you would read this from right to left. 40
And so does the browser. 41
So it's good to look for all of the h1s that are contained inside a div. 42
So in this case it would work and it would change the text color to red because our h1 is indeed 43
contained inside a div. 44
But you might realize that this is very very broad. 45
All of your h1s that are inside a div is going to be colored red. 46
So you might want to make it a little bit more specific. 47
Say in this case we're saying that the element that has an id of title that is contained inside a parent 48
with the class container-fluid should have the text color of red. 49
Now this is a lot more specific because firstly you're only going to have one id that is going to be 50
title on your whole page. 51
And by using the class of the parent you're also getting very very specific. 52
Now in this case this is actually kind of redundant code because if you wanted to apply this style to 53
an element with an id of title, as we said before, ids have to be unique across the page, so there can only 54
be one thing with the id that is title. 55
So you would never write this code, you would simply just target the id title, 56
right? But this is probably the most legitimate code that you will see. 57
So in this case we're saying that all the h1s on the web page that is the child of an element with 58
the class container-fluid should be colored red. And this is a very specific way of applying styles to 59
a particular element inside your web page. 60
And this allows you to really drill down your CSS, because you're not applying your styles to all the 61
h1, but instead you're saying that only the h1s that are inside a parent that has the class container- 62
fluid should have this style. 63
Now it's really important to remember that you should read the hierarchy from the right to the left. 64
So in this case it's the element that has a class of title that is inside a parent that is a div that 65
should have the color red. The one on the right is the child, the one on the left is the parent. 66
And this syntax will only work in a parent child situation. You can't have, for example, a div that has 67
the class of title and you're trying to use this syntax. 68
It just simply won't work. 69
Something has to be contained in something else. Something has to be a child of something else 70
for this type of hierarchical syntax to work. 71
Now the last type of combination I'm going to talk about are when you simply combine selectors, and in this 72
case that space is gone. 73
There is no space between your two selectors that you're combining and you can see something like this 74
so an HTML element combined with a class, or it could be an HTML element combined with a id, 75
it doesn't really matter. 76
But they have to all occur in the same element. 77
So in this case if I tried to change the color of the Hello World and I wanted to combine my selectors, 78
I would say something like the h1 that has an id of title should have the color red, and this is how 79
you should read the syntax. When there is no space you're reading from left to right. When there is space 80
then it's hierarchical and you're reading from right to left. 81
So it's a little bit confusing but you'll get used to it once you start applying it and using it yourself. 82
So it doesn't matter if it's an id or if it's a class that's being combined with an HTML element, that 83
doesn't matter at all. 84
And as long as there's no space between your two selectors it will work just fine. 85
So in this case we're saying that the div that has a class of container-fluid should have the text color 86
of red being applied to all of its content. 87
But this doesn't work if you're saying that the div with an id of title should have the text color red. 88
This is not valid code because currently on screen we don't have a single div that has the id of title. 89
We only have a div that has a child with the id of title and this doesn't work. 90
We're going to have to use a hierarchical selector if you want to do something like this. 91
So at this point a lot of students will ask, well what exactly is the difference between the one where 92
you have a space between two selectors and the one where there is no space? 93
So I've got this bit of HTML here that I've pre written to save you the boredom of having to watch me type. 94
But essentially we've got a div that has a class of container and it contains an h1 that has the class 95
of title and it says Hello World. 96
Then we have another div that has the class of container-fluid and it has an h1 97
with the class title as well. 98
Now I've removed all traces of Bootstrap from this Code Ply because it's not important. 99
I want to show you that what we're doing here, 100
this is just pure CSS. 101
It's not related to the Bootstrap classes or the framework at all. 102
This is just CSS knowledge that we're learning here. 103
So what if I wanted to apply some CSS styles in order to color the Hello World in red? What would I 104
need to do? 105
Well, unless I was willing to change the HTML, there is no way of applying a style selectively to this 106
Hello World and not the Good Bye World without combining our, selectors because, for example, if I said, let's 107
target the h1s and change the text color to red, then it's going to change both of the h1s. 108
And this is the same if I try to use their class which is title as well, 109
right? 110
So I would need to combine my selectors and in this case the difference between these two titles is 111
just that they're contained in different divs or divs with different classes rather. 112
So I can use that fact to structure my CSS code. So I can say, for example, the text that has a class 113
of title that's inside an element that has the class container should have this color red applied 114
to it. 115
So remember we're reading always from right to left. 116
So we're saying that an element with a class called title that's inside an element with a class called 117
container should have this style applied. 118
So let's hit run and you can see that we've managed to isolate the Hello World from the Good Bye World 119
simply by using hierarchical selectors. 120
Now if I delete that space there, this code will no longer work, because what this now reads is, look for 121
an element inside the HTML that has a class of container but also a class of title. 122
So essentially what you're saying here is you're saying that it is an h1 that has two classes and 123
it looks like this. 124
So that is what this code is saying. When you're combining code together with no spaces, 125
all of the selectors have to be within the same HTML element. 126
So, you could say, an h1 that has a class of container and also a class of title should have this 127
style. 128
And when I run the code you can see this still works exactly the same. 129
But this has no parent or child relationship at all. 130
And you would be targeting two classes in the same element. 131
But when you do combine selectors like this it doesn't really matter if you're combining classes with 132
ids or ids with HTML elements. 133
So let's give this an id. 134
Let's call this heading, and let's change our class back to title and hit run. 135
And now I'm able to change the h1 by saying h1#heading. This will target an h1 that 136
has an id of heading and that is of course our Hello World. 137
I can also say h1.title, but this now targets all the h1s that have a class of title, and that 138
is both Hello and Good Bye. 139
So I hope that illustrates a common confusion point which is space versus no space, 140
and what is the difference between a hierarchical and a simple combo. 141
So this takes a little bit of time to really sink in, 142
and I really urge you to build your own code playground and mess with your code to try and target specific 143
things without having to add in more custom classes into your HTML, 144
so try to use combinations instead of adding new classes that you can target. 145
So have a play around with that and in the next lesson we're going to get back to refactoring our code 146
so that we can finish off our web site. 147
So for all of that and more, I'll see you on the next lesson.