CSS is an indispensable element for markup, and among it, understanding CSS selectors is extremely important.

There is a priority level in CSS selectors, and if you don’t understand this priority, you may have trouble properly reflecting styles during markup.

To accurately handle CSS and correctly reflect styles, in this article, we will provide an easy-to-understand explanation of the types and priorities of CSS selectors.

What are CSS selectors?

A CSS selector indicates the portion you want to style.

CSS is written as follows:

The above code specifies the font size for the p tag, but the part indicating the p tag to be styled is called a selector.

CSS selectors are not limited to HTML tag elements but also include several types like class and id attributes. Their priorities are also determined based on their types.

If you don’t understand the priority, it can cause your page design to break, so make sure to understand it thoroughly.

Basic types of selectors

There are three main types of selectors in CSS that you should be aware of:

• Tag elements
• Class attribute
• ID attribute

Let’s look at each in detail.

Tag elements

Tag elements refer to HTML tags like <div> and <p>, and you can specify them as selectors.

Example:

div {
    padding: 20px;
    background: skyblue;
}
p {
    margin-bottom: 12px;
}

Class attribute

You can specify the class attribute of an HTML tag as a selector. Since it can be used multiple times, it’s the most commonly used selector.

Example:

.title {
    font-size: 32px;
    font-weight: bold;
}

ID attribute

You can also use the id attribute of an HTML tag as a selector, but be careful as it cannot be duplicated within a page.

Example:

#top {
    margin-top: 30px;
    margin-bottom: 120px;
}

Priority of selectors

The priority of CSS selectors is determined by the type of selector.

HTML tag < Class attribute < ID attribute

The above is the order of priority, with the ID attribute having the highest priority and the HTML tag selector having the lowest. For instance, if you write the code as below, since the ID attribute #top sets the background color to red, the background will be red.

<div class="background" id="top">
   <h1>HELLO WORLD!!</h1>
</div>

<style>
    div {
        background: grey;
    }
    #top {
        background: red;
    }
    .background {
        background: blue;
    }
</style>

Even if you change the background class, it will not be reflected if the background color is set using the ID attribute.

!important and Inline selectors

In addition to the basic selectors, there are !important and inline selectors.

!important

This will be prioritized over other selectors.

Example:

.title {
  font-size: 64px !important;
}
#top h1 {
  font-size: 24px;
}

Inline selectors

Inline selectors involve writing styles directly within HTML tag elements. This method of description is the selector prioritized just after !important.

<h1 class="title" style="font-size: 64px;">TITLE</h1>
<style>
    .title {
        font-size: 24px;
    }
</style>

Points to note about !important and inline selectors

While !important and inline selectors might seem convenient due to their high priority, they each have their drawbacks. Using !important allows you to apply your desired style, but it disregards the priority of selectors, making the code hard to manage if overused. Inline selectors also make the code difficult to manage when mixed with HTML and CSS.

Code using inline selectors:

<div style="margin: 30px;">
    <h1 style="font-size: 24px; font-weight: bold;">TITLE</h1>
    ...
</div>

Code organized using classes:

<div class="top">
    <h1 class="title">TITLE</h1>
    ...
</div>
<style>
    .top {...}
    .title {...}
    ...
</style>

Though the code lines without inline selectors may be longer, it’s much clearer and easier to manage. Using class definitions, if you want to change the style of the box, you only need to modify the .box part in the style. With inline styles, you’ll need to replace the style in two places. Merging codes makes it hard to read and can lead to style inconsistencies. Remember, it’s very important to write HTML and CSS separately.

Learn Frontend with Skilled

At Skilled, we offer a specialized, practical programming learning service focused on frontend development.

We cover everything from coding to becoming a frontend engineer. Our service emphasizes practical learning while coding, ensuring that you gain “skills” rather than just knowledge.

We’re currently running a free trial campaign. If you’re interested, we encourage you to take advantage of this free trial.

Click here for a free Skilled trial