CSS Specificity

CSS Specificity

CSS specificity is a set of rules used to determine which styles are applied to an element when multiple conflicting styles are defined. It's crucial to understand specificity to ensure that your styles are applied as expected. Specificity is calculated based on the following criteria, in order of importance:

Inline Styles: Styles defined directly on an HTML element using the style attribute have the highest specificity.

<div style="color: red;">This text is red.</div>        

ID Selectors: Selectors containing an ID have higher specificity than class selectors or element selectors.

#unique-element {
    color: blue;
}        

Class Selectors, Attribute Selectors, and Pseudo-Classes: Selectors containing classes, attributes, or pseudo-classes have higher specificity than element selectors.

.highlight {
    font-weight: bold;
}        

Element Selectors: Selectors targeting HTML elements directly have the lowest specificity.

p {
    font-style: italic;
}        
When multiple styles conflict, the browser applies the style with the highest specificity. If two conflicting styles have the same specificity, the one defined later in the stylesheet or HTML document takes precedence (due to the concept of the cascade).

To calculate specificity, you can assign values to each part of a CSS selector:

  • Inline styles: 1000
  • ID selectors: 100
  • Class selectors, attribute selectors, and pseudo-classes: 10
  • Element selectors: 1


For example:

  • #header .nav li.active:ID selector (header): (100)Class selector: (nav) (10)Element selector (li): (1)Class selector: (active) (10)Total: 121
  • div .nav li.active:Element selector (div): (1)Class selector: (nav) (10)Element selector (li): (1)Class selector: (active) (10)Total: 22

So, #header .nav li.active would override div .nav li.active because its specificity (111) is higher. However, if they were both defined with the same specificity, the last one declared would take precedence.

Here's a quick example to illustrate how specificity affects style application:
<div id="unique-element" class="highlight" style="color: green;">This text is green.</div>        

In this case, the text will be green because inline styles have the highest specificity. If you remove the inline style, the text will be blue due to the ID selector. If you remove both the inline style and the ID selector, the text will be bold because of the class selector.

Note: Inline style gets a specificity value of 1000, and is always given the highest priority!

Note 2: There is one exception to this rule: if you use the !important rule, it will even override inline styles!

要查看或添加评论,请登录

Sumit Mishra的更多文章

  • Install & Run Typescript

    Install & Run Typescript

    To compile TypeScript code into JavaScript, you need to have the TypeScript compiler () installed. You can install it…

  • Php 8 New Concepts

    Php 8 New Concepts

    PHP 8 introduced several new features and improvements. Here are some of the key concepts with examples: Named…

  • useRef Hook In React Js

    useRef Hook In React Js

    In React, the hook is used to create a mutable object called a ref. This ref can be attached to a React element and can…

  • Children In React Js

    Children In React Js

    In React.js, handling children is a fundamental aspect of building components.

  • Destructuring In JavaScript

    Destructuring In JavaScript

    Destructuring is a feature in JavaScript that allows you to extract values from arrays or properties from objects and…

  • Abstract Data Type In Detail

    Abstract Data Type In Detail

    An Abstract Data Type (ADT) is a high-level description of a set of operations that can be performed on a particular…

  • API resources In Laravel

    API resources In Laravel

    In Laravel, API resources provide a convenient way to transform and format your Eloquent models and collections into a…

  • Flux Pattern In React Js With Example

    Flux Pattern In React Js With Example

    Install Dependencies: You'll need to install package. You can install it using npm or yarn: or Implement Flux…

  • Rules of Hooks In React Js

    Rules of Hooks In React Js

    In React, hooks are functions that allow you to use state and other React features in functional components. The most…

  • What is Cron Jobs. How to Implement Cron Jobs in Php

    What is Cron Jobs. How to Implement Cron Jobs in Php

    Cron jobs in PHP are scheduled tasks that run automatically at predefined intervals on a Unix-based system. These tasks…

社区洞察

其他会员也浏览了