Is it possible to target “no target” in CSS?

后端 未结 1 820
Happy的楠姐
Happy的楠姐 2021-01-06 14:47

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 i

相关标签:
1条回答
  • 2021-01-06 15:09

    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>

    0 讨论(0)
提交回复
热议问题