Skip to content

Instantly share code, notes, and snippets.

@vanaf1979
Created October 28, 2020 09:18
Show Gist options
  • Save vanaf1979/9383395531d29c756183364ea1140cca to your computer and use it in GitHub Desktop.
Save vanaf1979/9383395531d29c756183364ea1140cca to your computer and use it in GitHub Desktop.
/* 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;
}
@MagnusOxlund
Copy link

Nice and concise. If anyone is in doubt, chaining selectors adds up points:

body h1 is 0002 points and wins over h1's 0001 point.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment