Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* Basic specificity cheatsheet */
h1 {
/* Native elements have a weight of 0001. */
}
::after {
/* Pseudo-elements have a weight of 0001. */
}
.class {
/* Class selectors have a weight of 0010. */
}
[type="text"] {
/* Attributes selectors have a weight of 0010. */
}
a:hover {
/* Pseudo-classes have a weight of 0010. */
}
#id {
/* Id's have a weight of 0100. */
}
/* Inline styles have a weight of 1000. */
<div style="color: red;">Text</div>
h1 {
/* !imporant has a weight of 10000. */
color: red !imporant;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment