CSS Specificity Demo

I built an interactive demo to illustrate how specificity in CSS works.

Press the “Add selector” and “Remove selector” buttons to add or remove a selector in the list of declarations and see how the background color changes accordingly. Each selector will be added to the top of the list to prove that it has a higher specificity than the previous selector.


/* !important overwrites everything */
body {
background: rebeccapurple !important;
}
/* Animation declarations take precedence over normal
 declarations */
div {
animation: bg 0s forwards;
}

@keyframes bg {
to {
background: yellow;
}
}
/* any selector with higher specificity, even if it doesn't 
match any element, inside :is() overwrites id + id */
#body:is(#body, #bla#bla) {
background: hotpink;
}
/* id + id overwrites id + class */
#body#body {
background: aqua;
}
/* id + class overwrites id + tag */
.body#body {
background: salmon;
}
/* id + tag overwrites id */
body#body {
background: fuchsia;
}
/* id overwrites classes */
#body {
background: brown;
}
/* class + class overwrites tag + class */
.body.body {
background: orange;
}
/* tag + class overwrites class */
body.body {
background: green;
}
/* class overwrites tag */
.body {
background: blue;
}
/* tag selector overwrites universal :where() selector */
body {
background: red;
}
/* universal :where() selector */
:where(body) {
background: #efefef;
}


This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović

I built an interactive demo to illustrate how specificity in CSS works.

Press the “Add selector” and “Remove selector” buttons to add or remove a selector in the list of declarations and see how the background color changes accordingly. Each selector will be added to the top of the list to prove that it has a higher specificity than the previous selector.

/* !important overwrites everything */
body {
  background: rebeccapurple !important;
}
/* Animation declarations take precedence over normal
 declarations */
div {
  animation: bg 0s forwards;
}

@keyframes bg {
  to {
    background: yellow;
  }
}
/* any selector with higher specificity, even if it doesn't 
match any element, inside :is() overwrites id + id */
#body:is(#body, #bla#bla) {
  background: hotpink;
}
/* id + id overwrites id + class */
#body#body {
  background: aqua;
}
/* id + class overwrites id + tag */
.body#body {
  background: salmon;
}
/* id + tag overwrites id */
body#body {
  background: fuchsia;
}
/* id overwrites classes */
#body {
  background: brown;
}
/* class + class overwrites tag + class */
.body.body {
  background: orange;
}
/* tag + class overwrites class */
body.body {
  background: green;
}
/* class overwrites tag */
.body {
  background: blue;
}
/* tag selector overwrites universal :where() selector */
body {
  background: red;
}
/* universal :where() selector */
:where(body) {
  background: #efefef;
}


This content originally appeared on Web development blog - Manuel Matuzović and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-01-26T10:50:54+00:00) CSS Specificity Demo. Retrieved from https://www.scien.cx/2022/01/26/css-specificity-demo/

MLA
" » CSS Specificity Demo." Manuel Matuzović | Sciencx - Wednesday January 26, 2022, https://www.scien.cx/2022/01/26/css-specificity-demo/
HARVARD
Manuel Matuzović | Sciencx Wednesday January 26, 2022 » CSS Specificity Demo., viewed ,<https://www.scien.cx/2022/01/26/css-specificity-demo/>
VANCOUVER
Manuel Matuzović | Sciencx - » CSS Specificity Demo. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/26/css-specificity-demo/
CHICAGO
" » CSS Specificity Demo." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/01/26/css-specificity-demo/
IEEE
" » CSS Specificity Demo." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/01/26/css-specificity-demo/. [Accessed: ]
rf:citation
» CSS Specificity Demo | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/01/26/css-specificity-demo/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts