Identify source of CSS style with Google dev tool

Question

So I am trying to apply a style to a specific div of my web mapping project. But I don't get why it's not working. I want that to specific div to be transparent, but it's overriten by a rule that gives the background-color #808080 and I can not locate the rule responsible for it. The dev tool says only for source. enter image description here

How can I find the source of the rule background-color: #808080!important?

@Maik Lowery: Hi, here's the link to the page. wasserwiki.eu/Wasserwiki_App — MrSalamikuchen
– MrSalamikuchen, Commented Dec 22, 2021 at 12:15
try adding body before .esriPopup .titlePane like this (body .esriPopup .titlePane).. or any parent class of .esriPopup see if this works — sanket
– sanket, Commented Dec 22, 2021 at 12:22

Zahra Mirzaei · Accepted Answer · 2021-12-22 14:26:06Z

1

When two similar styles (in the different selectors) have !important, the style be applied that its specificity has more priority. For that reason when you add body before .esriPopup, the priority of your style is more.

For more information about it, you can read this article.

answered Dec 22, 2021 at 14:26

Zahra Mirzaei

7594 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

MrSalamikuchen · Accepted Answer · 2021-12-22 13:24:32Z

0

The tip from @sanket is the solution:

body .esriPopup .titlePane {
    background-color: transparent!important;
}

Adding "body" did the trick.

answered Dec 22, 2021 at 13:24

MrSalamikuchen

1154 bronze badges

Collectives™ on Stack Overflow

Identify source of CSS style with Google dev tool

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related