- CSS selectors are what we use to find or target
particular bits of HTML.
The foremost common selectors are type selectors,
you may also hear these referred to as element selectors,
the class selector,
the ID selector and the descendant selector.
And the first one I want to start with is the most basic,
and that's the type selector.
Type selectors are global in nature,
meaning they're going to affect
every element of that type in a document.
You just need to know what the tag is
for a given HTML element in order to style it.
For example, to style paragraphs,
you'll use p,
for heading ones, you'll use h1,
for an unordered list, you'll use a ul and so forth.
While these selectors are very efficient,
they're also pretty broad,
which is why they're most often used
to set global site-wide styles.
Another basic selector is the class selector.
These match elements
based on the contents of their class attribute.
So in this example,
I've got a CSS class called error,
and in my HTML, I've got a paragraph tag
with the class attribute containing the word error.
And the output of this code combo
will give us the word oops in red.
The syntax for a class selector
is a period followed by the class name.
You can name a class anything you want
and use it on as many elements
and as many times on a page as you need.
This makes CSS classes pretty popular
and one of the most common selectors that you'll encounter.
Next, we've got ID selectors.
Unlike classes, IDs can only be used once on a page.
In this example,
the browser would find the element on a page
with an ID attribute set to content,
and then it would apply the styling
specified by that ID selector.
IDs are identified
by the pound symbol in front of the ID name.
Lastly, let me introduce you to the descendant selector.
The descendant selector matches all elements
that are descendants of a specified element.
So in this example,
the browser would find any span elements
nested inside of a div element,
regardless of how many levels deep down that span tag is.
That's an important thing to note
about descendant selectors.
They can apply to any nested element,
regardless of how deep it's found within the page structure.
The syntax for this type of selector
is written by stringing the selectors together
and separating them with a space.
The parent selectors are added first,
followed by each successive nested selector.
While there isn't a limit
as to how many of those you can string together,
you don't want to go crazy,
more than four starts to get in efficient,
as in there are performance implications.
And being over specific with your styling
makes it really difficult to override that style later
if you need to.
That said, let's take a look at a couple of examples
of how you could use descendant selectors.
In this first example represented by the orange here,
the browser would locate any paragraph
found within a div tag
and then apply the styling.
In the second one here represented by the blue,
we're going to look for any anchor element
inside of a paragraph
which also happens to be inside of a div,
and then we'll apply the styling.
If we use both of these together,
you can see that the style
from the more specific selector combination is used.
And that's the anchor inside the paragraph inside the div.
As you can see, descendant selectors
allow you to be very specific.
Although there are certainly more selectors available
than the ones I've shown here,
most of your styles will probably be written
using the ones we've just covered.
Learning how to write efficient selectors
based on your document structure
gives you the power to style every element on the page
exactly how you want.