Thursday, March 28, 2024

CSS Specificity and the Cascade

Learn more about how to manipulate the appearance of your web pages via CSS. Specificity and cascade are important to understand to how to craft unique pages that match your vision.

The Cascade

Cascade is a mechanism that determines which styles can be applied to an element and the cascade is what controls all CSS priorities. Thus, we can assign the appropriate value to some elements, taking into account the origin, specificity, and established order of style rules.

Thus, through these style sheets called “cascades,” CSS allows you to apply more stylesheets to the same document, avoiding conflicts through this process called cascade.

We can sort by origin and weight, where origin refers to the source of the statement (author styles, user styles, and default browser settings) and weight refers to the importance of the statement.

When you do not use any style sheet on a web page, it will be viewable according to the default browser style sheet. But when there are more sources of style information that provide control of the web page elements, the information is rewritten by the higher-weighted style order.

Thus, the cascade works in the following order:

  • inline user styles marked as important and priority
  • author styles embedded and marked as important and priority (internal style sheets)
  • external styles
  • default styles applied by browser or user

So, the situation is simple, namely: if two rules have the same specificity, the last specificity declared will have priority, and rules with more selective selectors replace those with less specific. When embedding CSS in HTML code, it always comes out of outer style sheets, regardless of the order of the code.

You can use a reset file that resolves Eric Meyer’s CSS to remove the default styles from the equation and will be missing out on browser-related problems if you have to overwrite it. All browsers have a default style sheet that is the least important. We define a CSS rule for the font family and we overpower a pre-set rule for the browser style sheet.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#one {
background-color: lightblue;
border: 1px solid black;
}
.two {
background-color: coral;
border: none !important;
}
p {
background-color: blue;
color: black;
font-family: Verdana;
padding: 15px;
}
</style>
</head>
<body>
<p class="two">Paragraph</p>
<p class="two" id="one">Priority selector</p>
</body>
</html>

The output of the above listing looks like this:


Figure 1. Output of the listing above

Therefore, in the above example, class IDs/selectors have priority because the specificity is higher than the element selectors. The second class, the ID with a higher specificity than the classes, the coral color should be applied to the second element, the first to obtain the color of the coral background. The background color of the third rule has not been applied, although the rules mentioned later in the source order supersede the previous registers because of the important statement in the second rule.

CSS Specificity

Specificity refers to how a CSS selector is specific. This specificity is one of the ways conflicting rules apply and, moreover, is a method of solving cascading conflicts. In the list below, you will find levels of specificity to the most specific, to the least specific:

Ids like #container
Styles applied directly to HTML code, using the style attribute
HTML tags such as <ul>, <li>, <tg>, <p>, etc.
Classes such as: hover,: root,: focus,: link, target; attributes such as type = "text"

The specificity of a rule is calculated by adding the value of each selector. Only by assigning the numeric value to each type selector can be calculated how specific a rule is.

Thus, for less than 10 selectors, we can calculate the specificity in the base 10. Normally, the specificity is not calculated in base 10, but in a larger number, often unspecified. Thus, very specific selectors, such as identity, will not be required by another set of less specific selectors, such as type selectors. The specificity is given by the concatenation of the 4 resulting numbers.

The specificity of a selector is calculated in a very special way, based on values in four distinct categories, as follows: a, b, c, and d. Each has the default value of 0.

If the style is one inline, a is equal to 1 if the statement comes from an HTML style attribute
B is equal to the number of ID attributes in a selector
C is equal to the number of attributes and pseudo-classes in a selector
D is equal to the number of elements and pseudo-elements in a selector

Starting from these rules and implementing them, one can calculate the specificity of any CSS selector.

The specificity of a selector is calculated as follows:

w {
color: black;
font-size: 10px;
}
w.welcome {
color: black;
font-size: 12px;
}

So the text in the paragraph will have 12px because the second CSS line (w.welcome) is more specific than the first when it is class = “welcome”.

Here’s another example: 1. The HTML part; 2. Part of CSS

  1. HTML 2. CSS
    <div id="sidebar"> div p. welcome { font-size: 12px }
    <p class="welcome"> #sidebar p { font-size: 10px }
    </div>

The second line of CSS is more specific to the font size of the paragraph than to the first CSS line. In the following lines, we will calculate the specificity by expressing it in the form of a, b, c, d.

  • Inline style: a = 1 – (1,0,0,0)
  • ID: b = 1 – (0,1,0,0)
  • Class, pseudo-class, attribute c = 1- (0,0,1,0)
  • Element, pseudo-element d = 1 – (0,0,0,1)

What is to be remembered is that an ID is more specific than a class that is more specific than an element. We hope that, through the above, you will help solve some of the issues related to the CSS procedure. In most cases, if you have a conflict in styles, the problem will be reduced to the specificity. When the CSS is not declared, but an element behaves in a particular way, it will draw from the default browser style. it is more appropriate to declare the properties with the least specificity needed to personalize the elements. Start with the slightest specificity and add more if needed.

Conclusion

Cascading Style Sheets are quite extensive and complex. I hope this article will help you to you continue to explore and fully understand how CSS works!

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured