1
00:00:00,000 --> 00:00:03,990
Now that we know a little bit more about CSS syntax, I want to take a moment to

2
00:00:04,000 --> 00:00:07,990
focus on selectors in a bit more detail.

3
00:00:08,000 --> 00:00:11,990
Remember, selectors allow us to tell the browser which elements on the page we want to style.

4
00:00:12,000 --> 00:00:16,990
In some cases, you are going to want to apply styles broadly to a number of

5
00:00:17,000 --> 00:00:18,990
elements all across your site.

6
00:00:19,000 --> 00:00:21,990
In other situations, you are going to want to target a smaller number of

7
00:00:22,000 --> 00:00:24,990
elements, or even a single element.

8
00:00:25,000 --> 00:00:29,990
Understanding how selectors work will allow you to do just that.

9
00:00:30,000 --> 00:00:33,990
The first selector I want to start with is the most basic, the element selector.

10
00:00:34,000 --> 00:00:38,990
Element selectors are global in nature, meaning they are going to affect every

11
00:00:39,000 --> 00:00:40,990
element of that type in a style document.

12
00:00:41,000 --> 00:00:45,990
You simply need to know what the tag is for a given element in order to style it.

13
00:00:46,000 --> 00:00:51,990
Now unlike HTML, we don't need the angle brackets around the tag name, just the tag itself.

14
00:00:52,000 --> 00:00:56,990
For example, to style paragraphs, you'd use the p; for heading 1s, you'd use an

15
00:00:57,000 --> 00:01:01,990
h1; for unordered lists you'd use an ul, and so on.

16
00:01:02,000 --> 00:01:05,990
While these selectors are very efficient, they're also very broad, which is why

17
00:01:06,000 --> 00:01:10,990
they are most often used to set global site-wide styles.

18
00:01:11,000 --> 00:01:13,990
Another basic selector type is the class selector.

19
00:01:14,000 --> 00:01:19,990
Classes are HTML attributes that can be set on any HTML element.

20
00:01:20,000 --> 00:01:23,990
You can name a class anything you want, and you can use it on as many elements,

21
00:01:24,000 --> 00:01:26,990
and as many times on the page as you need.

22
00:01:27,000 --> 00:01:31,990
As you can imagine, that makes classes pretty popular when it comes to writing CSS.

23
00:01:32,000 --> 00:01:35,990
Now here, for example, the browser would look through all the elements on the

24
00:01:36,000 --> 00:01:40,990
page and apply styling to any elements with a class attribute of subheading.

25
00:01:41,000 --> 00:01:47,990
Note that classes are identified in CSS by the period in front of their name.

26
00:01:48,000 --> 00:01:53,990
Now ID selectors are similar to class selectors in that they represent an HTML attribute.

27
00:01:54,000 --> 00:01:57,990
They differ from classes in one very important aspect.

28
00:01:58,000 --> 00:02:02,990
IDs must be unique to the page, meaning that if you assign an ID to a page

29
00:02:03,000 --> 00:02:08,990
element, no other element on that page may have that specific ID.

30
00:02:09,000 --> 00:02:13,990
In this example, the browser would find the element on the page that has the ID

31
00:02:14,000 --> 00:02:16,990
attribute of sidebar and then apply the styling.

32
00:02:17,000 --> 00:02:21,990
Now, IDs identified by the octothorpe, or as it is more commonly known, the pound

33
00:02:22,000 --> 00:02:24,990
symbol, in front of the ID name.

34
00:02:25,000 --> 00:02:29,990
You can also make class and ID selectors element-specific by adding an element

35
00:02:30,000 --> 00:02:31,990
to the front of the selector.

36
00:02:32,000 --> 00:02:37,990
This limits the styling to only elements with the specific class or specific ID applied to it.

37
00:02:38,000 --> 00:02:42,990
For example, here styling would only be applied to heading 2s with a class of

38
00:02:43,000 --> 00:02:46,990
subheading, or divs with an ID of sidebar.

39
00:02:47,000 --> 00:02:51,990
This allows you to write a single general class, or ID style, and then follow

40
00:02:52,000 --> 00:02:56,990
that with a more focused element-specific style if necessary.

41
00:02:57,000 --> 00:03:00,990
Classes and IDs can be anything you want them to be, but you do need a follow

42
00:03:01,000 --> 00:03:02,990
some naming conventions.

43
00:03:03,000 --> 00:03:05,990
First, don't use any spaces or special characters.

44
00:03:06,000 --> 00:03:08,990
Also, remember that they are case sensitive.

45
00:03:09,000 --> 00:03:11,990
If you use uppercase letters, you are going to need to remember that when

46
00:03:12,000 --> 00:03:13,990
writing the styles for them.

47
00:03:14,000 --> 00:03:18,990
Honestly, it doesn't really matter what you practice, as long as you're consistent.

48
00:03:19,000 --> 00:03:23,990
Another type of selector I want to discuss is the descendent selector.

49
00:03:24,000 --> 00:03:27,990
Descendent selectors allow you to target an element based on where it's found

50
00:03:28,000 --> 00:03:28,990
within another element.

51
00:03:29,000 --> 00:03:33,990
You simply string the selectors together, separating them with whitespace.

52
00:03:34,000 --> 00:03:38,990
The parent selectors are added first, followed by each successive nested selector.

53
00:03:39,000 --> 00:03:44,990
For example, in this example the browser would find any span elements inside of

54
00:03:45,000 --> 00:03:48,990
paragraph elements which were also inside of div elements.

55
00:03:49,000 --> 00:03:52,990
Now there isn't any limit as to how many of those that you can string together,

56
00:03:53,000 --> 00:03:56,990
but more than three starts to become extremely inefficient.

57
00:03:57,000 --> 00:03:58,990
Let's take a look at a couple of examples.

58
00:03:59,000 --> 00:04:04,990
Now in this first example, the browser would locate any paragraph found within a

59
00:04:05,000 --> 00:04:08,990
div tag and then apply the styling.

60
00:04:09,000 --> 00:04:12,990
In the second one, it would find any span element inside of a paragraph which is

61
00:04:13,000 --> 00:04:16,990
also inside of a div, and then apply the styling.

62
00:04:17,000 --> 00:04:21,990
As you can see, descendent selectors allow you to be extremely specific.

63
00:04:22,000 --> 00:04:24,990
Another thing I want to point out here is that the descendent selectors apply to

64
00:04:25,000 --> 00:04:29,990
any nested element, no matter how deep it's found within the page structure.

65
00:04:30,000 --> 00:04:34,990
Going back to that first example, it's going to apply to paragraphs inside the

66
00:04:35,000 --> 00:04:38,990
div, not just ones that are immediately inside the div.

67
00:04:39,000 --> 00:04:41,990
You can also group selectors together by using commas between the

68
00:04:42,000 --> 00:04:42,990
selectors themselves.

69
00:04:43,000 --> 00:04:47,990
Now this can make writing styles more efficient by grouping selectors together

70
00:04:48,000 --> 00:04:48,990
that need the same styling.

71
00:04:49,000 --> 00:04:53,990
Instead of writing three separate selectors like this, for example, you can

72
00:04:54,000 --> 00:04:57,990
simply write one group selector, and that's a lot more efficient.

73
00:04:58,000 --> 00:05:00,990
Although there are certainly more selector types available than the ones that

74
00:05:01,000 --> 00:05:05,990
I've shown here, the overwhelming bulk of your styles will probably be written

75
00:05:06,000 --> 00:05:07,990
through the basic selector types that we've covered.

76
00:05:08,000 --> 00:05:11,990
Learning how to write efficient selectors based on your document structure is

77
00:05:12,000 --> 00:05:15,990
among the most important CSS skills that you can cultivate.

78
00:05:16,000 --> 00:05:18,990
By mastering the different types of selectors available, you'll find that you

79
00:05:19,000 --> 00:05:29,000
have a much broader set of options for writing effective styles.