Reinforcing Material

Let's practice our eye on complex selectors. Which one will win in a conflict?

Battle 1

nav ul li a — [0, 0, 4] (4 tags)
ul .menu-link — [0, 1, 1] (1 tag + 1 class) Winner: 2. A class is always " heavier " than any number of tags.

.card:hover — [0, 2, 0] (Class + Pseudo-class)
.main .card — [0, 2, 0] (2 Classes) Winner: Tie on points. The one written lower in code will win.

#footer .link:not(.active) — [1, 2, 0] (ID + Class + Pseudo-class :not. Attention: :not itself weighs nothing, but its content — the class — is counted!)
body #footer a[href^="http"] — [1, 1, 2] (ID + Attribute + 2 tags) Winner: 1. (It has 2 classes vs 1 in the second column).

Important

The simplest way to avoid these battles is to write short, understandable selectors using the BEM methodology.

Note

If you feel you're starting to " fight " with specificity — that's a sign the project architecture needs simplifying.