CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ASR
ASR

Reputation: 3549

how to disable the outer css for the specific inner id?

I have a main with the ID "vy_accordion". Inside this , I am creating many 's dynamically by adding a new ID to each .When the specific with the ID name "palette-selector" then outer css should not work.

the sample code is like below

<div id="vy_accordion">
    <a class="divlink" href="#palette-selector">palette-selector</a>
    <div id="palette-selector" class="settingDiv" style="display: inline;">
       Some text
</div>

The following is the css for the above html code: 

#vy_accordion div {
    background: white;
    display: none;
    padding-left: 15px;
    padding-top:5px;
}

In this code the property display:none should not work, when the id of the inner is "palette-selector". how to disable display:none for the with the id "palette-selector" ?

Upvotes: 0

Views: 104

Answers (2)

Makkiel
Makkiel

Reputation: 31

:not operator is the way to go like Marcos said.

You can also overwrite your css for #palette-selector like:

#palette-selector {
    background: red;
    display: block; /*this will show your div again*/
    padding-left: 0px;
    padding-top:0px;
}

If you keep having problems overwriting use !important after each style, but I will try to avoid that.

Upvotes: 1

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

Use :not() operator

#vy_accordion div:not(#palette-selector)

See more about this:

https://developer.mozilla.org/es/docs/Web/CSS/%3Anot%28%29

Upvotes: 2

Related Questions