Page 90 - CSS

selectors have a Group A specificity and class selectors have a Group B specificity. An ID selector
outweighs any number of class selectors. Because of this, color:blue; from the #foo selector and
the background:black; from the .bar selector will be applied to the element. The higher specificity of
the ID selector will cause the browser to ignore the .bar selector's color declaration.

Now imagine a different CSS implementation:

.bar {
color: red;
background: black;
}

.baz {
background: white;
}

Here we have two class selectors; one of which declares color as red and background as black, and
the other declares background as white.

An element with both the .bar and .baz classes will be affected by both of these declarations,
however the problem we have now is that both .bar and .baz have an identical Group B specificity.
The cascading nature of CSS resolves this for us: as .baz is defined after .bar, our element ends
up with the red color from .bar but the white background from .baz.

Example 3: How to manipulate specificity

The last snippet from Example 2 above can be manipulated to ensure our .bar class selector's
color declaration is used instead of that of the .baz class selector.

.bar {} /* a=0, b=1, c=0 */
.baz {} /* a=0, b=1, c=0 */

The most common way to achieve this would be to find out what other selectors can be applied to
the .bar selector sequence. For example, if the .bar class was only ever applied to span elements,
we could modify the .bar selector to span.bar. This would give it a new Group C specificity, which
would override the .baz selector's lack thereof:

span.bar {} /* a=0, b=1, c=1 */
.baz {} /* a=0, b=1, c=0 */

However it may not always possible to find another common selector which is shared between any
element which uses the .bar class. Because of this, CSS allows us to duplicate selectors to
increase specificity. Instead of just .bar, we can use .bar.bar instead (See The grammar of
Selectors, W3C Recommendation). This still selects any element with a class of .bar, but now has
double the Group B specificity:

.bar.bar {} /* a=0, b=2, c=0 */
.baz {} /* a=0, b=1, c=0 */

https://riptutorial.com/ 68