Is it possible to target “no target” in CSS?
Question
Is there a css selector for "no fragment identifier present"? The opposite of :target .
The thing is, I'm making a document where different parts of it are visible depending on which fragment identifier you give it. Think of it as a sprite file, only for HTML.
So it looks like this
<style>
section {display:none}
section:target {display:block}
</style>
<body>
<section id="one">The first block (showing with #one)</section>
<section id="two">The second block (showing with #two)</section>
<section id="three">The third block (showing with #three)</section>
</body>
And the user sees the first section if it's displayed with document.html#one on the location bar, etc.
The idea is that the browser will cache the html page (since it is just static html) and no other content needs to be loaded when displaying another block of text, thus minimising server load.
But the file looks stupidly empty when you call it up without a fragment identifier, so I wonder if there's a way to make all of it visible in that case, without any hidden sections. CSS only, no JS or server side processing; otherwise it wouldn't be static HTML!
Edit:
Unlike the proposed duplicates, I would like to "simply" show the whole document when there's no fragment identifier, not just one element in particular.
In other words, the default (in the absence of any #) should be to show everything; only if there is an # should everything but the target be hidden.
The duplicates don't address this situation at all.
1 answers
solution1
5 ACCPTED 2016-06-27 20:16:01
With some extra markup and more verbose and specific CSS to write, to avoid javaScript. Needs to be updated each time HTML structure is updated .
:target ~section { display:none; } #one:target ~.one, #two:target ~.two, #three:target ~.three { display:block; }
<nav> <a href="#one">One</a> <a href="#two">Two</a> <a href="#three">Three</a> <a href="#">None of below targets</a> </nav> <!-- html anchor to allow use of :target ~ selectors --> <a id="one"></a> <a id="two"></a> <a id="three"></a> <!-- end anchor --> <section class="one">The first block (showing with #one)</section> <section class="two">The second block (showing with #two)</section> <section class="three">The third block (showing with #three)</section>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.