htmlcsscss-specificity

css a element selector overriding bottom element selectors

hello,
I am trying color my paragraph tag but i unavailable to do because top p tag (element selector) is overriding bottom p tag.
it work when i write tag name but i want them to automatically inherit color. Not to write every single name of the elements. 

h1, p{color: #000;}

:root{
--modern-white: #fff;
}

.section-main {
  & .container .section-main--content  {
    color: var(--modern-white);
  }
}
<main class="section-main">
      <div class="container">
        <div class="section-main--content">
          <h1>lorems impus</h1>
          <p>
           iis natus, id ea odio. Rem
            reiciendis, aliquid ut nisi voluptas deleniti reprehenderit eum
            possimus, consequuntur expedita molestiae pariatur veniam nostrum,
            earum rerum. Sunt vitae saepe hic quae quo aperiam harum quidem
            maiores voluptatum, dignissimos dolor libero at nobis aut repellat
            exercitationem cupiditate, quasi quas delectus recusandae.
            Necessitatibus
          </p>
        </div>
      </div>
    </main>

Solution

  • It works as designed, see CSS Specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

    I would assign the p tag a dedicated class (e.g. modern-white). That overrules the global rule.