CSS Conflicts: CSS is disabled due to conflicts with another
I have a web page that I need to change in CSS. At this point, I need to quickly fix an annoying problem. There are some HTML elements that use multiple CSS classes as shown below.
<ul class="core nested-level">
The problem is that the "core" is defined in many places with different rules; hover, ul, *, etc. One of these rules causes the "nested level" to be disabled for some reason as the chrome developer tool annoyingly keeps showing up.
Any idea how to quickly fix this problem or force this style to override an already defined one (if it exists)? I tried the style below but it didn't display correctly:
.nested-level {
padding-left: 62px;
}
source to share
It seems that you have defined a rule in your "main" css class for a specific HMTL element. For example:
ul.core{
padding-left: 0px;
}
Then, in your "nested level", presumably you tried to define a rule for the same property.
The way to fix it is to avoid defining your css rule based on the HTML element, or use the "important" keyword when defining your css rule, as this
.nested-level {
padding-left: 62px !important;
}
This will fix your problem.
source to share
better not to use !important
.
More details: https://j11y.io/css/dont-use-important/
add ID
to Element tag. ID
Selector has a higher priority than class
Selector
<ul id="myId" class="core nested-level">
and use css Like:
#myId {
padding-left: 62px;
}
source to share