CSS lives in the global namespace, and we don't always have the ability to control happens in the global namespace. Collisions happen quite often.
Collisions from:
You will eventually run into one of the following scenarios:
!important
tag and you would like to change it.Is all hope is lost? Nay good sir.
I'm going to introduce you to what I affectionately call the NOPE selector.
It will trump all !important
rules and CSS specificity and get your CSS working the way it should.
Disclaimer: "With great power comes great responsibility"
- Uncle Ben
This trick is meant to get you out of a pinch. Not to be a lazy ass.
If you can fix your CSS problems the correct way, do it. If you can't, use this Jedi CSS hack.
Okay, now that we are on the same page. Here is goes:
The most specific you can get with a CSS selector is prefixing a given selector with :root:root:root
:root:root:root
is the root of the root of the root. Whatever that means...
Let's look at some code.
/* red? For serious? */
.your-selector {
color: red;
}
/* red and orange suck! Make this color badass */
:root:root:root .your-selector {
color: #BADA55;
}
/* no more orange, because of specificity level of the NOPE selector */
body .your-selector {
color: orange;
}
The above code will turn .your-selector
color to #BADA55
while ignoring red
and orange
.
Are other global CSS selectors messing with your code? NOPE =)
When getting ultra-specific with selectors you can override third party CSS pretty easily.
See the Pen Using the NOPE selector by DavidWells (@DavidWells) on CodePen.
See the Pen Using the NOPE selector against !important by DavidWells (@DavidWells) on CodePen.
Now that you know this trick. Please use it with only the best intentions.
Fixing CSS collisions doesn't need to be a chore.
This will help in your journey to CSS nirvana.
Go forth and CSS.