'Rules Specificity [duplicate]

body {
  font-size: 12px;
}
.brown {
  color: brown;
  font-weight: 200;
}
.large {
   font-size: 28px;
}
.normal {
   font-size: 18px;
   color: blue;
   font-weight: 700;
}
<html>

<head>
  <title>CSS Specificity</title>
  <link rel="stylesheet" href="index.css" type="text/css">
</head>

<body>
  <div>

    <p class='normal'>Normal and blue text!</p>
    <p class='normal large brown'>Large and brown text!</p>

  </div>
  <script src="script.js"></script>
</body>

</html>

The output should be "Normal and blue text!" in blue and "Large and brown text" in large enter image description herebrown I have tried so many combination and still ca't get it right - please help and thanks.

htmlcsscss-selectorscss-specificity


Solution 1:[1]

The rule for normal is last in the CSS, so it overwrites the color in brown if both classes are applied

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Johannes

Related Questions