3 Replies - 282 Views - Last Post: 18 September 2019 - 06:11 AM

#1 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 354
  • Joined: 25-August 13

!important style being ignored

Posted 17 September 2019 - 06:16 PM

Working on an admin panel, at the login page. With the way my templates are set up, the navbar is set to always be included at the top of the page. The one exception I want is on the login page, where it should only be the login form. Easy enough.

<html>
    <head>
        <!-- stuff -->
    </head>
    <body>
        <nav><!-- this got included by default --></nav>
        <form><!-- this form has stuff in it --></form>
    </body>
</html>



So first, I tried JS.

<html>
    <head>
        <!-- stuff -->
    </head>
    <body>
        <nav><!-- this got included by default --></nav>
        <form><!-- this form has stuff in it --></form>

        <script>
            document.querySelector('nav').classList.add('hidden');
        </script>
    </body>
</html>

<in css land>
.hidden {
    display: hidden;
}
</in>

Result?

[code]
<html>
    <head>
        <!-- stuff -->
    </head>
    <body>
        <nav class="hidden"><!-- lol sike, still not hidden --></nav>
        <form><!-- this form has stuff in it --></form>

        <script>
            document.querySelector('nav').classList.add('hidden');
        </script>
    </body>
</html>

<in css land>
.hidden {
    display: hidden;
}
</in>



Still not hidden. Next attempt was to try style tag in the head element.

<html>
    <head>
        <!-- insert link to external css here -->

        <style>
            nav {
                display: hidden !important;
            }
        </style>
    </head>
    <body>
        <nav><!-- lmao you still didn't get me bro --></nav>
        <form><!-- this form has stuff in it --></form>
    </body>
</html>



That nav element has a will to live, damn it.

What do I do? What's causing both the class and the !important style rule to be completely ignored? Neither shows up in devtools whatsoever.

Is This A Good Question/Topic? 0
  • +

Replies To: !important style being ignored

#2 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,311
  • Joined: 12-December 12

Re: !important style being ignored

Posted 18 September 2019 - 05:08 AM

That is because hidden is not a valid value for display. Your browser's developer tools should confirm this (or the internet), typically by being greyed or crossed out. Try none.

You should also avoid !important as much as possible.
Was This Post Helpful? 0
  • +
  • -

#3 Splashsky   User is offline

  • D.I.C Regular
  • member icon

Reputation: 12
  • View blog
  • Posts: 354
  • Joined: 25-August 13

Re: !important style being ignored

Posted 18 September 2019 - 05:48 AM

Alright, that was my minor typo. display: none !important; did work, however it doesn't without the important rule. Since the style tags are declared after the external CSS is loaded, shouldn't the style tags take priority, even without the important declaration?

This post has been edited by Splashsky: 18 September 2019 - 05:49 AM

Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6829
  • View blog
  • Posts: 28,311
  • Joined: 12-December 12

Re: !important style being ignored

Posted 18 September 2019 - 06:11 AM

If a CSS rule is loaded later in the order then it will overrule an earlier version, but only if it has the same (or greater) specificity. A comparable rule with a higher specificity will take precedence, wherever it appears in the load-order.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1