CSS Selectors, Specificity, and Pseudo-classes

CSS Selectors, Specificity, and Pseudo-classes

  • By Caleb Aston
  • Software Engineer

SELECTORS AND SPECIFICITY

The use of CSS is founded upon a concept known as selectors. Selectors allow you to target specific elements to apply styles to. For example,

p {
    color: red;
    background: blue;
}

That would give us that eye jarring style applied to all <p> elements in your entire site! Pretty neat! Then when you want to change it, you change the style in that one location, and the entire website follows suit. That one fact right there saves frontend developers a lot of time.

Well what if you want to make only some of the <p> elements that color, and others a different color? There are a couple options you can take. Both require you to be more specific with your selectors.

First, let’s say your site has several <p> elements, and the ones you want to style just happen to be the only ones that you have nested inside of <div> elements. The CSS solution would then look like this:

p {
    color: red;
    background: blue;
}

div p {
    color: yellow;
    background: green;
}

With this, all <p> elements not contained inside of a <div> element would be red and blue, but every <p> element that is nested inside of a <div> element would be yellow and green. When you list multiple elements, the last one is the one that you are actually altering.

How does that work? CSS has a built in way of deciding the specificity of your selectors. The specificity of our first selector above would be 0,0,1 while the second is 0,0,2. Each element in our selector list would add one onto our last number of our specificity rating. If the specificities are the same, then the second rule will override the first. I will explain the other two numbers in a bit.

When the computer runs over this code, it will make all <p> elements, including the ones inside of the <div> elements, red and blue, then it will get to the next rule that is also selecting <p> elements. Here it will weigh in the specificity of each selector. The second rule wins out for those specific elements, so the blue and red is overridden with green and yellow.

The further to the left, the higher the specificity weight. For example, a specificity value of 0,1,0 would win out over a value of 0,0,14. Also, specificity is not base 10. Each is a separate number. So where do we get the other numbers?

Introducing Class and Id. Class and Id are attributes that can be added to an HTML element for improved selectability.

can be selected this way:

.mellow-paragraph { ...styles… } 0,1,0

Notice the period before the class name. That is how you tell CSS that the following name is a class. For an Id, <p id=”special-paragraph”> you would select it this way:

#special-paragraph { ...styles… } 1,0,0

Each class included in your selector list will increase the middle number by 1, and each id listed will increase the leftmost number by 1.

Besides the specificity weight difference between classes and id’s there is one more significant difference. Classes can be applied to as many elements as you would like, while an id must be unique and can only be included on one element in your code.

In general, an id will be the highest degree of specificity you use. Only two things weigh in heavier than an id: inline styles (<p style=”color: blue;”>), and then the “!important” (p { color: blue !important;) tag which overrides all else.

PSEUDO-CLASSES & PSEUDO-ELEMENTS

Another big part of CSS is a concept known as pseudo-classes and pseudo-elements. You know how when you hover over a link it turns blue? That is thanks to a pseudo-class known as :hover. If you wanted to override the blue color and make it, say, green when you hover over it, you can do it like so:

a:hover {
    color: green;
}

Now when the <a> tag is hovered over, it will be green instead of the default blue. There are dozens of these nifty pseudo-classes that help you select specific elements or define styles in specific scenarios, such as a hover event.

There are far fewer pseudo-elements in css. The most commonly used ones are ::before and ::after. These selectors allow you to insert content before or after the selected element. Suppose you had a paragraph and you wanted to mark it as important. One way to accomplish this with just CSS would be to do this:

p::before {
    content: “Important! - ”;
    color: red;
}

The result would be a red “Important! - “ inserted right before the paragraph. ::after would be used to achieve a similar goal, only after the selected element(s).

Other pseudo-classes such as :first-child and :last-child help to select the specific element you want. The use of these is a bit more intuitive. Suppose you have a <ul> element with several child <li> elements. You want the last one of those child elements to be green, so it will stand out from everything else:

ul li:last-child {
    background: green;
}

This will select the last of all of the sibling <li> elements and apply the green coloring to just that element, assuming nothing else has a higher specificity and overrides the style.

WRAP UP

The topics in this blog have been mostly on the structural workings of CSS. The actual styles are mostly intuitive, and it will just take time and practice to get to know them and the best way to use them. And I am sure there are hundreds of other blog posts or tutorials you can watch that will cover which styles to use in more detail.

Hopefully, though, this tutorial has helped you understand how to better use CSS. If you need help with your site’s styling or with anything else tech related, the team here at Mindfire Technology would love to help!

Reach out to us today and we can help you build your dream project!

SHARE


comments powered by Disqus

Follow Us

Latest Posts

subscribe to our newsletter