- Now that we know a little bit more about CSS syntax,
I want to take a moment to focus on selectors
in a bit more detail.
Remember, selectors allow us to tell the browser
which elements on the page we want to style.
In some cases, you're going to want to apply styles broadly,
to a number of elements all across your site.
In other situations, you're going to want to target
a smaller number of elements, or even a single element.
Understanding how selectors work
will allow you to do just that.
The first selector I want to start with
is the most basic: the Element Selector.
Element Selectors are global in nature,
meaning, they're going to affect every element
of that type in a styled document.
You simply need to know what the tag is
for a given element in order to style it.
Now, unlike HTML, we don't need the angle brackets
around the tag name, just the tag itself.
For example, to style paragraphs, you'll use the p,
for heading1s, you'd use an h1,
for unordered list, you'd use an ul and so on.
While these selectors are very efficient,
they're also very broad,
which is why they're most often used
to set global, site-wide styles.
Another basic selector type is the Class Selector.
Classes are HTML attributes that can be set
on any HTML element.
You can name a class anything you want
and you can use it on as many elements
and as many times on the page as you need.
As you can imagine, that makes classes pretty popular
when it comes to writing CSS.
Now here, for example, the browser would look through
all the elements on the page
and apply styling to any elements
with the class attribute of "subheading".
Note that classes are identified in CSS
by the period in front of their name.
ID Selectors are similar to Class Selectors
in that they represent an HTML attribute.
They differ from classes in one very important aspect:
IDs must be unique to the page.
Meaning that if you assign an ID to a page element,
no other element on that page
may have that specific ID.
In this example, the browser would find the element
on the page that has the ID attribute of "sidebar"
and then apply the styling.
IDs are identified by the octothorpe
or as is more commonly known, the pound symbol,
in front of the ID name.
You can also make Class and ID Selectors element-specific
by adding an element to the front of the selector.
This limits the styling to only elements
with the specific class or specific ID applied to it.
For example, here, styling will only be applied
to heading2s with a class of subheading,
or divs with an ID of sidebar.
This allows you to write a single general class or ID style
and then follow that with a more focused
element-specific style, if necessary.
Classes and IDs can be anything you want them to be,
but you do need to follow some naming conventions.
First, don't use any spaces or special characters.
Also, remember that they're case-sensitive.
If you use upper case letters, you're going to need
to remember that when writing the styles for them.
Honestly, it doesn't really matter what you practice
as long as you're consistent.
Another type of selector I want to discuss
is the Descendent Selector.
Descendent Selectors allow you to target an element
based on where it's found within another element.
You simply string the selectors together,
separating them with white space.
The parent selectors are added first,
followed by each successive nested selectors.
For example, in this example, the browser would find
any span elements inside of paragraph elements
which were also inside of div elements.
There isn't any limit as to how many of those
that you can string together, but more than three
starts to become extremely inefficient.
Let's take a look at a couple of examples.
In this first example, the browser would locate
any paragraph found within a div tag
and then apply the styling.
In the second one, it would find any span element
inside of a paragraph, which is also inside of a div
and then apply the styling.
As you can see, Descendent Selectors
allow you to be extremely specific.
Another thing I want to point out here
is that Descendent Selectors apply to any nested element
no matter how deep it's found within the page structure.
Going back to that first example,
it's going to apply to any paragraphs inside the div,
not just ones that are immediately inside the div.
You can also group selectors together
by using commas between the selectors themselves.
This can make writing styles more efficient;
by grouping selectors together,
they don't need the same styling.
Instead of writing three separate selectors
like this, for example,
you can simply write one Group Selector.
And that's a lot more efficient.
Although there are certainly more selector types available
than the ones that I've shown here,
the overwhelming bulk of your styles
will probably be written through the basic selector types
that we've covered.
Learning how to write efficient selectors
based on your document structure
is among the most important CSS skills
that you can cultivate.
By mastering the different types of selectors available,
you'll find that you have a much broader set of options
for writing effective styles.