How CSS Specificity works?

PHOTO EMBED

Mon Mar 14 2022 03:47:18 GMT+0000 (UTC)

Saved by @soniajessi #css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Specificity</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div id="main">
            <p>
                <a href="#">Link here</a>
            </p>
        </div>
    </div>
</body>
</html>

a {
    color: black;
}

p a {
    color: purple;
}

div #main p a {
    color: yellow;
}

#main a {
    color: blue;
}

.container #main a {
    color: red;
}
content_copyCOPY

You know what is specificity and how its value is used to determine which style will be applied to the element on the web page. Now let's see an example to understand how specificity works.

https://www.scaler.com/topics/css/css-specificity/