I am a codeNewBie who has started learning HTML, CSS and JavaScript since October 2019 and have completed the "Basic CSS" course from freecodecamp very recently. Learning CSS has been an amazing journey so far power but the power of classes and IDs and who overrides whom still remained confusing to me, hence I have decided to write this post to allow myself and you to understand the hierarchy a little better and in-depth using scenarios.
Override hierarchy
There are many ways we can style our html element tags using CSS. We can override style rules by using different type of selectors. Below is a demonstration of which CSS selector has precedence over other css selectors:
SCENARIO 1
<h1>
Cat Shop
</h1>
body {
color: green;
}
Output: Cat Shop is green.
Reason: Because we have assigned the colorgreen
to the body element.
SCENARIO 2
<h1>
Cat Shop
</h1>
body {
color: green;
}
h1 {
color: red;
}
Output: Cat shop is red.
Reason: Even though our parent container elementbody
sets the color to be green, we are overriding the parent style rule with child element selector.
SCENARIO 3
<h1 class="blue-text">
Cat Shop
</h1>
body {
color: green;
}
h1 {
color: red;
}
.blue-text {
color: blue;
}
Output: Cat Shop is blue.
Reason: A class can override the style rule set through the element selector.
SCENARIO 4
<h1 class="blue-text pink-text">
Cat Shop
</h1>
body {
color: green;
}
h1 {
color: red;
}
.blue-text {
color: blue;
}
.pink-text {
color: pink;
}
Output: Cat Shop is pink.
Reason: The order of the classes listed inside the<h1>
element is irrelevant. However, in CSS, the second declaration will always override the first declaration because browsers always read CSS from top to bottom in order of their declaration. Sincepink-text
is below theblue-text
, the text of Cat Shop changed to Pink.
SCENARIO 5
<h1 id="orange-text" class="blue-text pink-text">
Cat Shop
</h1>
body {
color: green;
}
h1 {
color: red;
}
.blue-text {
color: blue;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
Output: Cat Shop is orange.
Reason: ID selector always takes precedence over class selector regardless of whether it was declared above or below the class style.
SCENARIO 6
<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
Cat Shop
</h1>
Output: Cat Shop is black.
Reason: Notice how we addedstyle="color: black;"
to ourh1
element. Inline HTML style attribute overrides the element, class and the ID selectors altogether.
SCENARIO 7
<h1 style="color: black;" id="orange-text" class="blue-text pink-text">
Cat Shop
</h1>
body {
color: green;
}
h1 {
color: red;
}
.blue-text {
color: blue !important;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
Output: Cat Shop is blue.
Reason:!important
is the most powerful of all. So when you absolutely need to be sure that an element has specific CSS, you can use!important
which overrides all ofelement, class, ID selectors
andinline style attribute.
Using!important
should be last resort when attempting to override a previously defined style rule.
I hope the scenarios were helpful to you and if you have suggestions regarding other scenarios please let me know in the comment. Also like I mentioned before I am very new to programming as as well writing blog posts, so if any mistakes were found please feel free to correct me. Thank you for reading!
Top comments (9)
I recommend a couple of other scenarios that you should investigate to help your understanding.
and
Hey, these are two very good examples. thank you soooo much!! Would you mind if I add them in my post as scenarios?
Not at all. Free free to do so.
Had to reply to you the last because I had to test them out myself and see the output. I am really glad that you have pointed these out and I got the opportunity to learn. thank you again.
You are doing a good work on nailing down a solid foundation. Keep it up!
Thank you :D
! important is the best thing above all...! 🥳
Thanks for sharing this.😇
:D :D
glad it helped :D :D