6

I have this situation in my code:

<!-- This is the global CSS file -->
<style type="text/css">
#show_div{
    display: none;
}
</style>
<!-- This is the local CSS file (only in this page)-->
<style type="text/css">
#show_div{
    /* However to disable display: none;*/  
}
</style>
<body>
<div id = "show_div">
    Text text
</div>

I usually need to hide this element, but on one page, I need to show it. In global css file I have:

#show_div{
    display: none;
}

How can I disable display: none;? I can not use jQuery, $('#show_div').show(); (or JavaScript).

Thanks

If you do not understand my problem, then I apologize. I can try to explain again.

4 Answers 4

Reset to default
12

Change the body class or id of the page you want it to be visible on

<style>
#show_table #show_div{
display:block!important;
}
</style>


<body id='show_table'>
<div id='show_div'>
text text 
</div>
1
  • Wouldn't this not work if the element is a flex though? How do you undo a display: none that was applied to any other generic types of display?
    – wamster
    Commented Feb 17, 2023 at 3:01
6

Use display: block to get the default display for a <div> element, like tis:

#show_div { display: block; }
2

Set it to a different value, but it sounds like you'd be better off just including the content in the page you want it to appear in instead of putting it everywhere and hiding it.

2

Use !important in front of your style on the single page to override previous style definitions.

#show_div {
display:block !important;
}
2
  • is it possible to make it without !important ?
    – HoCo_
    Commented Oct 18, 2018 at 11:39
  • 1
    Yes, you may not need it because it depends on where the CSS rule is placed, the order it appears, etc. There are a few articles describing this in detail. Check the top response for this stackoverflow.com/questions/25105736/…
    – lu-bhz
    Commented Oct 19, 2018 at 14:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.