Mr Lister Mr Lister - 1 year ago 45
CSS Question

Is it possible to target "no target" in CSS?

Is there a css selector for "no fragment identifier present"? The opposite of


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

section {display:none}
section:target {display:block}

<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>

And the user sees the first section if it's displayed with
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!


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.

Answer Source

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 {
#two:target ~.two,
#three:target ~.three  {
  <a href="#one">One</a> 
  <a href="#two">Two</a>
  <a href="#three">Three</a>
  <a href="#">None of below targets</a>
<!-- 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>