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%;
}

Here is the page I am working on and as you can see my content goes below the image (the blue square). https://www.argus-accounting.co.uk/thank-you-for-contacting-argus-accounting

enter image description here

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,413
  • 2
  • 17
  • 32
  • 3
    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
  • 1
    Can you post the html? Maybe a screenshot of the inspector stack? – J. Allen Jun 01 '22 at 22:09
  • 3
    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 Jun 01 '22 at 22:14
  • I understand that, I was as bemused as you when I spotted it. It came from me teaching a new staff member about `SCSS` and the fact you could simply indent code within other code to make it more logical/readable/easy to find things. I did not expect unnecessary nested `div` after nested `div`. I would have expected to find something more like what you found. I think they have taken my explanation a little too literally and indented at each occasion just because they could. – Eoin Jun 06 '22 at 09:23

1 Answers1

1

For the screenshot you have provided, it looks like you manually added the style, but it doesn't apply to the title div you are currently selecting which lacks the necessary classes, so it is greyed out because that is the element you are inspecting.

What happens when you select the body div or the p element underneath it?

J. Allen
  • 620
  • 5
  • 12
  • Ah ha! You're right the class `.view-article` in on the body and so is the class `.outline-19` – Eoin Jun 13 '22 at 10:16