In CSS, you are able to make certain properties apply to only a few elements by grouping things by selectors.
At the most basic level, selectors can be one of three things:
- Element Tag Names: ex
- Class Name - preceded by a
- Id Name - preceded by a
Mixing Element Tags and Classes
What if you want to be more specific for you selector than just
These two selectors would style all
h1 elements or all elements with a class of
But, let's say you only want to style only
h1 elements with the class of
dropdown: you can do this by chaining class or id selectors.
So to select
h1 elements with a class of
dropdown the selector would be
You can continue chaining to be even more specific, but ALL listed requirements must pass for an element to be styled.
For instance you could style only elements that have a class of
logo by creating the selector
Usually element tags and classes alone will not be enough to style things just the way you want without adding a bunch of unneeded classes to your HTML. In some instances you may want to make sure that an element's parent meets a set of requirements first before selecting the element.
For instance let's say that we want to style the items of a list with a class of
We can start by thinking about the selector to style the parent element:
Then to style only child elements from this list we can continue our selector by adding a space after our
ul.students and then describing the child elements that we want to style:
Direct Child Selector
The above example would select ANY
li element that appears inside of unordered lists with the class of
Now look at this HTML:
<ul class="students"> <li>Lisa</li> <li>Bob</li> <li> More <ul class="read-more"> <li>Peter</li> <li>Bruce</li> <li>Harvey</li> </ul> </li> </ul>
If we used the selector
ul.students li this would not only style the items for Lisa and Bob, but it would also style the list items in the "More" section.
To limit a selector to only style first level children, use the
> symbol between a parent and child in your selector string:
ul.students > li would only select Lisa and Bob.
A Note About Ids
Ids are a bit of a tricky subject when it comes to CSS.
At the end of the day, what we want is reusable code that stops us from having to repeat ourselves.
But, because of their nature,
ids always must be unique and therefore will limit us from being able to reuse styles in the future.
Instead it is a best practice to use classes to describe your elements and add hooks for styling (even if those elements happen to be completely unique right now).