CODEWITHSUNDEEP
htmlcssnoscript
mezzodrinker
mezzodrinker

Reputation: 988

CSS selector :target not working?

I am trying to create a warning for my website that is only being displayed when JavaScript is disabled. This warning should be able to be "clicked away". To achieve this, I thought the CSS selector :target might be a good idea. I eventually came up with the code that can be seen at the bottom of this post.

The idea of this snippet was that the user has to click the link in order to let the warning disappear. Since CSS offers the :target selector and I am able to target a <div> element by a link, I thought this might work out. Well, apparently it doesn't. I also tried it with the same code on my homepage but as you might notice, it doesn't work there either.

I greatly appreciate any help that might help me get this thing done.

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");

/********************/
/* noscript warning */
/********************/
div.noscript-warning {
    opacity: 1;
    background: #6ee5f9;
    color: #fff;
    padding: 0.2em;
    font-family: "Open Sans", sans-serif;
    text-align: right;
    animation-duration: 2s, 2s;
    animation-delay: 0s, 2s;
    animation-timing-function: none, ease-in-out;
    animation-name: hide, fade-in;
}

div.noscript-warning > a {
    text-decoration: none;
    color: #fff;
}

div.noscript-warning-text {
    padding: 0.2em;
    border: solid white 0.2em;
    text-align: center;
}

#hide-warning { display: none; }
#hide-warning:target + div.noscript-warning { display: none; }
@keyframes hide { from { opacity: 0; } to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; color: #6ee5f9; } to { opacity: 1; color: #fff; } }
<div class="noscript-warning">
    <div id="hide-warning"></div>
    <div class="noscript-warning-text">
        This page makes use of JavaScript to display certain aesthetic goodies. These are disabled because you have JavaScript disabled. Because of that, certain features will not work at all. You have been warned.<br/>
        Click &quot;Dismiss&quot; to dismiss this warning.
    </div>
    <a href="#hide-warning">Dismiss [x]</a>
</div>

Upvotes: 0

Views: 1493

Answers (1)

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

you wrote

#hide-warning:target + div.noscript-warning { display: none; }

but the sibling div of #hide-warning has class .noscript-warning-text so the selector should be

#hide-warning:target + div.noscript-warning-text { display: none; }

if you need instead to select the outer div, just move #hide-warning one level up, e.g.

<div id="hide-warning"></div>
<div class="noscript-warning">
    <div class="noscript-warning-text">
      ... 
</div>

Or, if you prefer to avoid a useless empty div and clean a bit your markup you could write

<div id="hide-warning" class="noscript-warning">
    <div class="noscript-warning-text">
      ... 
</div>

so your selector simply becomes

 #hide-warning:target { display: none; }

Upvotes: 4

Related Questions