Browser ignoring css styles for id if the element hast additional classes

Question

if i am having a following html:

 <div id="myID" class="xy za">...</div>

all browsers are absolutely ignoring the following css:

 #myID{style: any !important;}

because there are styles loaded for:

 #myID.xy.za{ ... }

important note: .xa.za are random classes, which alternate for every single user whyle extermal widget is loading, so i can't grep them.

Any ideas?

If it has a parent of eg. class `parent`, maybe you can try `.parent #myID{ // Rules here }` or similar — Anurag Srivastava, Jun 13 '22 at 16:14
Please show a [mcve] where you have both rules, and the one in question is ignored. — t.niese, Jun 13 '22 at 18:09
And you should never use `!important`. The `!important` modifier results in hard to manage css code. — t.niese, Jun 13 '22 at 18:11
I found out, that the #myID Element is within a shadow DOM, so i can't access it via my css. — Viktor, Jun 13 '22 at 20:22

score 1 · Answer 1 · answered Jun 13 '22 at 16:24

1

I found out, that the #myID Element is within a shadow DOM, so i can't access it via my css.

answered Jun 13 '22 at 16:24

Viktor

623
4
10
25

1

This might be of interest for you [Override styles in a shadow-root element](https://stackoverflow.com/questions/47625017/override-styles-in-a-shadow-root-element) – t.niese Jun 13 '22 at 20:27
This ist the way i got it: ```var responeEl = document.querySelector('#myID').shadowRoot.querySelector('.myClass'); jQuery(responeEl).css("font-size", "19pt");``` – Viktor Jun 13 '22 at 22:00

score 0 · Answer 2 · answered Jun 13 '22 at 16:19

This example I made works fine for me.

There's probably something else in your CSS that overrides with !important your styles for #myID

#myID {
  color: red !important;
  font-size: 30px !important;
  font-family: arial !important;
}

#myID.xy.za {
  color: green;
  font-size: 12px;
  font-family: courier;  
}

<div id="myID" class="xy za">
This is your div
</div>

score 0 · Answer 3 · answered Jun 13 '22 at 18:01

<style>
#myID {
  color: red !important;
  font-size: 30px !important;
  font-family: arial !important;
}
</style>


<div id="myID" class="xy za" style= " color: green !important;font-size: 12px !important; font-family: courier !important;  ">
This is your div
</div>

Try In-line css !!

Browser ignoring css styles for id if the element hast additional classes

3 Answers3