0

Following is my code. Why both "hi" and "hello" are in white background-color? I think the element .content .parti should be more particular than .content p and "hello" should be in orange background-color.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>particularity</title>
    <style type="text/css">
        .content p {
            background-color: white;
        }
        .content .parti {
            background-color: orange;
        }
    </style>
</head>
<body>
<div class="content">
    <p>hi</p>
    <div class="parti">
        <p>hello</p>
    </div>
</div>
</body>
</html>
Sandy
  • 3
  • 1
  • There is the order of precedence for CSS, see [this question](http://stackoverflow.com/questions/25105736/what-is-the-order-of-precedence-for-css) – Irf Feb 13 '17 at 04:22

4 Answers4

0
<div class="parti">
  <p>hello</p>
</div>

the p element is on top of the .parti div, so what you see is white. If you add padding to .parti, you'll see it's background color.

.content p {
  background-color: white;
}
.content .parti {
  background-color: orange;
  padding: 10px;
}
<div class="content">
  <div class="parti">
    <p>hello</p>
  </div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • Thank you so much. I made a mistake that `background-color` can not be inherited. I added `background-color` to `.content .parti` and the second `p` couldn't inherite this property. @Shubhranshu @Eugene – Sandy Feb 13 '17 at 07:47
  • Thank you. I made a mistake that `background-color` can not be inherited. I change the style to `.content p { color: white; } .content .parti {color: orange; }`. Following [css-tricks.com/specifics-on-css-specificity](https://css-tricks.com/specifics-on-css-specificity/), `.content .parti {color: orange; }` is more specific for "hello", but it is still white. – Sandy Feb 13 '17 at 08:14
0
 .content .parti p{
        background-color: orange;
  }

Your style weight is for the div not for the p element. Hence the background-color: orange is not added to the p tag.

Shubhranshu
  • 511
  • 3
  • 12
  • https://css-tricks.com/specifics-on-css-specificity/ This article I think better explains your answer. – Clemsonopoly94 Feb 13 '17 at 03:56
  • @Clemsonopoly94 Yup. i have also understood the CSS style weight concept from there – Shubhranshu Feb 13 '17 at 03:57
  • Thank you. I made a mistake that `background-color` can not be inherited. Now I change the css file as `.content p { color: white; } .content .parti {color: orange; }`. Following [css-tricks.com/specifics-on-css-specificity](https://css-tricks.com/specifics-on-css-specificity/), '.content .parti {color: orange; }' is more specific for "hello", but it is still white. – Sandy Feb 13 '17 at 08:07
0

The second p is the child element of the div with .content class. That is why it inherits its styles. Also, as mentioned by @Shubhranshu, you applied style for a div, not a p.

Eugene
  • 365
  • 6
  • 21
0

There is the order of precedence for CSS

  1. css rules (in style tag) and css files are overridden by inline css.
  2. a less specific selector is taken precedence over by more specific one.
  3. rules that appear earlier in the code are overridden by rules that appear later (same specificity).

Due to point 3, the background is still white.

Credits: Stack Overflow this answer

Community
  • 1
  • 1
Irf
  • 4,285
  • 3
  • 36
  • 49