CODEWITHSUNDEEP
htmlcss
Viktor
Viktor

Reputation: 633

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

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?

Upvotes: 1

Views: 50

Answers (3)

Rijil
Rijil

Reputation: 68

<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 !!

Upvotes: 0

Viktor
Viktor

Reputation: 633

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

Upvotes: 1

napolux
napolux

Reputation: 16074

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>

Upvotes: 0

Related Questions