All language subtitles for 10. Advanced CSS - Combining Selectors

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.