0

I have read this answer: What does it mean when a CSS rule is grayed out in Chrome's element inspector?

It does a good job of showing greyed out elements that are inherited but not applied.

My entire CSS rule however is greyed out. It is instead applying another rule.

This is the rule that is applied:

.view-article #g-main > div > div > div > div > div .row .col .com-content-article__body > p {
    font-size: 24px;
    line-height: 32.74px;
    max-width: 70%;
    margin: auto;
    color: #334354;
}

And here is my greyed out rule being used in the inspector stylesheet. As you can see I have simply added an extra class in front of it, which should make it more specific. I also tried adding important to no avail.

.outline-19 .view-article #g-main > div > div > div > div > div .row .col .com-content-article__body > p {
    margin-left: 0;
    width: 100%;
}

If the selector was wrong the rule wouldn't even show up so the selector must be correct. Why on earth isn't my rule applied?

Eoin
  • 1,207
  • 2
  • 14
  • 30
  • 1
    actually, you seems to be the only person to see that result. No one can answer your question if we cannot *see* that result – Temani Afif Jun 01 '22 at 22:09
  • Can you post the html? Maybe a screenshot of the inspector stack? – J. Allen Jun 01 '22 at 22:09
  • 2
    I'm not trying to be funny (and I appreciate that this isn't an answer to your question, so it's a tangential comment at best), but,,, your selector is... _insane_. The `p` on the far right (the one that's a direct child of `.com-content-article__body`)... why not add a class to that `p`, so that your selector can be: `p.my-context {...}` ? – Rounin - Standing with Ukraine Jun 01 '22 at 22:14

0 Answers0