CSS Selectors are used to target HTML elements from the DOM and style them, however often times you will encounter a case where you must override a pre-existing style to apply your new styling changes. Sometimes your changes may work, however other times they may not. Why is your code not working? This is all due to how the browser calculates which styling has the priority over another, also known as CSS specificty.
Make your style changes apply to the HTML elements
First we must understand how the browser decides which rule has the priority. Browsers will look at the HTML element and CSS selectors to take into consideration a number of key factors in an order of priority:
- Inline HTML styles with ‘!important’
- CSS rules with ‘!important’
- Inline HTML styles
- CSS rules targeting an ID
- CSS rules targeting a class, psuedo class(::first-child for example) or attribute
- CSS rules targeting a HTML element node
The list above is the order the browser will review the CSS code to determine which rule will get priority. Any HTML elements with an inline style of ‘!important’ will overrule any style in CSS file. On the other end of the spectrum, a rule with an element node targeting the HTML element node will be very easy to override.
Tip: Using Chrome, you can press F12 to use dev tools. Select the HTML node in the Elements tab and view the stylings rules applying to this element in the panel to the right (below for dev tools docked to the bottom).
How to override a CSS style with same type of selectors
If two rules have classes targeting an HTML element, then as they are both equal in not having any more important rules (inline styles, ‘!important’ or ID) trying to apply the styling, then the browser will next calculate the quantity of classes in a rule and compare them. The rule with the highest quantity of class selectors will become the overruling style. For example, lets look at the following code:
button.my_button.button_01.big_button {
color: blue;
}
button.my_button {
color: red;
}
At first glance, you may think the button would have the color “red” as they both have element and class selectors, and the red styling rule is further down the document. However, whilst it is true they both have an element selector (button) and class selectors, the rule applying the colour: green rule has three class selectors (.my_button , .button_01, .big_button) in comparison to the color: red rules one (“.my_button”). Therefore, the rule with quantity of three class selectors and one element selector, overrules the rule with one class selector and one element selector.
Our Visual Guide
Below is a interactive guide to help display the order of priority for the CSS selectors. As you scroll down the document, new CSS rules will be added which will overwrite the previous ones. Highlighted in green is the overruling selector, in red is the old rules which are no longer in use, and the rules which are faded out are rules not yet present/being executed in the example stylesheet.
To help illustrate which of the the selector types, they will be highlighted as so:
Element Node Class / Attribute / Pseudo Selector ID Inline HTML !important
<section id=”main_box” class=”box”>
<div class=”glass_box”>
<span id=”circle_01″ class=”circle” data-element=”circle-span” >
</span>
</div>
</section>
</body>
body {
background: #142527;
border: solid 1px white;
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
section {
width: 400px;
height: 260px;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, #000000 50%, #151515 50%);
}
div {
display: flex;
justify-content: center;
align-items: center;
width: 160px;
height: 160px;
backdrop-filter: blur(15px);
border: solid 1px rgb(127 127 127 / 22%);
border-radius: 20px;
}
span {
background-color: white;
height: 65%;
aspect-ratio: 1/1;
border-radius: 100px;
box-shadow: inset 10px -15px 15px rgb(0 0 0 / 30%);
}
span:after {
content: “”;
position: absolute;
background: linear-gradient(45deg, rgb(0 0 0 / 70%), transparent);
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 100%;
}
span {
box-shadow: 0px 0px 70px slateblue;
}
div span {
box-shadow: 0px 0px 70px red;
}
section div span {
box-shadow: 0px 0px 70px yellow;
}
body section div span {
box-shadow: 0px 0px 70px orange;
}
body section div span:first-child {
box-shadow: 0px 0px 70px indigo;
}
body section div span.circle {
box-shadow: 0px 0px 70px green;
}
body section div
span.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px aqua;
}
body section div.glass_box
span.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px crimson;
}
body section div span#circle_01 {
box-shadow: 0px 0px 70px bisque;
}
body section div
span#circle_01.circle {
box-shadow: 0px 0px 70px aquamarine;
}
body section div
span#circle_01.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px cornflowerblue;
}
body section div.glass_box
span#circle_01.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px darkblue;
}
body section.box div.glass_box
span#circle_01.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px coral;
}
body section#main_box div.glass_box
span#circle_01.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px violet;
}
body section#main_box.box div.glass_box
span#circle_01.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px darkmagenta;
}
<span style=”background-color: darkseagreen;
box-shadow: 0px 0px 70px darkseagreen;”>
span {
box-shadow: 0px 0px 70px darkkhaki!important;
}
span.circle {
box-shadow: 0px 0px 70px darkorange!important;
}
*/
body section#main_box.box div.glass_box
span#circle_01.circle[data-element=”circle-span”] {
box-shadow: 0px 0px 70px seagreen!important;
}
<span style=”background-color: greenyellow!important; box-shadow: 0px 0px 70px greenyellow!important;”>