sneilan sneilan - 6 months ago 8
HTML Question

Override CSS Classes Infinitely

This is more of a theoretical question.

Is the stack of overrides for CSS ad-infinitum? For instance, is there always a CSS override for every override?

Lets say I have written

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.a {
color: red;
}
/* Override it again */
div.a {
color: blue;
}
/* Again! */
body div.a {
color: yellow;
}
/* Again!! :) */
html body div.a {
color: yellow;
}
/* AND AGAIN!! */
html body div.a {
color: pink !important;
}
</style>
</head>
<body>
<div class="a">a</div>
</body>
</html>


Is !important combined with html body div.a the absolute highest level override for div.a? Must there always exist something with a higher override?

Answer

In theory you can simply repeat a rule to increase the specificity.

.foo.foo.foo { }

In practise, browsers eventually treat a selector as having too many components and ignore it.

(There is also the style attribute, which is more specific than any selector)