Search code examples
cssgoogle-chromeweb-inspector

Why is my CSS rule greyed out even though it's more specific and important doesn't make a difference

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?

Solution

  • 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?