Page 89 - CSS

Group Comprised of Examples

pseudo-elements ::before, ::first-letter

Group A is the most specific, followed by Group B, then finally Group c.

The universal selector (*) and combinators (like > and ~) have no specificity.

Example 1: Specificity of various selector sequences

#foo #baz {} /* a=2, b=0, c=0 */

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

#foo {} /* a=1, b=0, c=0 */

.bar:hover {} /* a=0, b=2, c=0 */

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

:hover {} /* a=0, b=1, c=0 */

[title] {} /* a=0, b=1, c=0 */

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

div ul + li {} /* a=0, b=0, c=3 */

p::after {} /* a=0, b=0, c=2 */

*::before {} /* a=0, b=0, c=1 */

::before {} /* a=0, b=0, c=1 */

div {} /* a=0, b=0, c=1 */

* {} /* a=0, b=0, c=0 */

Example 2: How specificity is used by the browser

Imagine the following CSS implementation:

#foo {
color: blue;
}

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

Here we have an ID selector which declares color as blue, and a class selector which declares
color as red and background as black.

An element with an ID of #foo and a class of .bar will be selected by both declarations. ID

https://riptutorial.com/ 67