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