Cascading Style Sheets (CSS) provide the styling and design of our web pages with many different types of selectors. Below we will discuss the many different types of selectors so that we can start “adding the paint” to our pages.
The Universal Selector
* {
color: blue;
}The universal, sometimes called ‘wild’ or ‘star’, selector will select all of our elements. It can be easily overwritten because it is the least specific selector.
The Element Selector
p {
color: red;
}The element selector is self describing in that it will select all elements that has the tag specified. In the example above, this would be the <p> tag. They are more specific than universal selectors, but less specific than other selectors, so also easily overwritten.
The Class Selector
<div class="new-dev">For all new devs</div>Notice how we inserted the CSS selector name inside the opening div tag first.
.new-dev {
color: orange;
font-size: 12rem;
}Notice how in our CSS we include a dot before writing the name of the class that was put in quotes inside our <div> tag.
The class selector has a heavier specificity than element or universal selectors, but less than ID and !important selectors. A perk to the class selector is that you can use it in as many tags as needed for your style. This is also the most common way to style web pages.
The Multiple Classes Selector
<div class="rachel ross monica joey phoebe chandler ">I Love FRIENDS</div>Notice how the tag above contains six classes, rachel, ross, monica, joey, phoebe, and chandler.
.rachel {
color: green;
}We can style only rachel if we’d like, and then ross separately.
.ross {
font-size: 16rem;
}Multiple classes gives us layers of specificity and order that we can control with sibling classes. Its specificity weight is the same as classes, but the lowest class on the page would win. Example, if rachel had the color green and chandler had the color pink, pink chandler would win. However, please keep in mind that when using a single CSS doc, CSS will prioritize the latest or ‘most-to-the-bottom’ style on its page which will tamper with the order logic above.
The Pseudo-Class Selector
<h1>Can this be anymore difficult?!</h1>
<h1>I know!/h1>
<h1>I am Psuedo class</h1>Notice that all of the tags are the same.
h1:last-child {
color: olive;
}Pseudo classes are used very frequently and when a set amount of elements are unknown. Let’s say for example there were over 100 <p> tags in my mark-up and I wanted to choose the last one. The above example would suffice.
The specificity weight of pseudo-classes are more specific than universal, element, and classes, but less specific than IDs, and !important.
The ID Selector
<p id="central-perk">I have an ID. It's called 'central-perk', and there is no other ID with my name.</p>ID names can only ever be used once. It is a unique identifier.
#central-perk {
color: black;
}Notice how we needed to use a # symbol before the name when calling it in our CSS. The specificity weight of IDs are more than universal, element, class, and pseudo-selectors, but they are less than !important.
The !important Selector
Please proceed with caution when using our final selector, !important.
h2 {
color: blue !important;
font-size: 14px !important;
}This selector has the most weight of them all, and by definition, is more important than all other selectors.
When used with inline styling, !important will trump an !important that is externally linked. Please read the article The 3 Different Ways to Use CSS for more information.
