Last Rule

Last Rule

  • When two or more css rules have identical selectors, the latter of the two rules takes precedent

// in css

p {
    color: red;
}

p {
    color: green;
}


<!-- in html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Page</title>
  </head>

  <body>
    <p> Color will be green</p>
  </body>
</html>

Here the <p> tag will be green because the last conflicting rule took precedent

Live Example

JS Bin on jsbin.com

In the example above, we have identical selectors .box where each has a different property for background-color. In this case, the last rule law will apply and the background-color of the element will be red since it is listed last (in the css file) among the conflicting selectors.