Skip to content

Latest commit

 

History

History
58 lines (38 loc) · 1.52 KB

1. What is CSS selector specificity and how does it work?.md

File metadata and controls

58 lines (38 loc) · 1.52 KB
Raw

What is CSS selector specificity and how does it work?

About

CSS Specificity is the set of the rules applied to CSS selectors in order to determine which style is applied to an element.

CSS Specificity helps you to :

  1. It helps you understand why you styles aren't being applied.
  2. It helps you organize your css code.
  3. It helps you write cleaner and Less css code.

How it works

At a high-level, there are three buckets of specificity your CSS will fall under:

  1. Type selectors & pesudo-elements
// Type selectors
h1{}

// Pesudo-elements
::before{}
  1. Class selectors & attibuite selectors & pesudo-classes
// Class selectors
.cat { }

// Attibuite selectors
[type="radio"] { }

// Pesudo-classes
:hover { }
  1. Id selectors
// Id selector
#cat { }

Calculating specificity

Note :

You may run into situations when leveraging CSS frameworks, such as Bootstrap, where you can't use CSS specificity to override the native styles. In these instances, using !important is not considered bad practice.

Resources