CODEWITHSUNDEEP
css
John Steve
John Steve

Reputation: 49

CSS rules conflict : CSS disabled as a result of conflicts with another one

I have a web page, which I need to change its CSS. At the moment, I need a quick fix to an annoying issue. There are some HTML elements that use several CSS classes like the one below.

<ul class="core nested-level">

The problem is that "core" is defined in many places with different rules; hover, ul, *, etc. One of these rules for some reason cause "nested-level" to be disabled as chrome developer tool annoyingly keep showing up.

Any idea how to quick fix this issue or to force this style to override the already defined one (if it exists) ? I tried out the style below, but it didn't show up properly:

.nested-level {
    padding-left: 62px;
}

Upvotes: 3

Views: 165

Answers (2)

Ehsan
Ehsan

Reputation: 12959

better is dont use !important.

Read More: https://j11y.io/css/dont-use-important/

add ID in Element tag . id Selector have Higher priority than class Selector

<ul id="myId" class="core nested-level">

and use css Like :

#myId {
    padding-left: 62px;
}

Upvotes: 0

orabis
orabis

Reputation: 2809

It seems that you defined a rule in your "core" css class for a specific HMTL element. For instance:

ul.core{
     padding-left: 0px;
}

Then in your "nested-level", assumingly, you tried to define a rule for the same property.

The way to fix it is either to avoid defining your css rule based on an HTML element, or to use the "important" keyword when defining your css rule, as this

.nested-level {
    padding-left: 62px !important;
}

This will fix your issue.

Upvotes: 2

Related Questions