Default :Target with CSS

Default :target with CSS

Spontaneously I'd have to say that the only solution I can think of is unfortunately using JavaScript. Something like:

<script type="text/javascript">
  if (document.location.hash == "" || document.location.hash == "#")
    document.location.hash = "#updates-list";
</script>

EDIT:

Ok, got a CSS solution. This however requires the default entry #updates-list to be placed last (after #updates-map and any other tabs you may add):

.tab, .tab:target ~ #updates-list  {
  display: none;
}
#updates-list, .tab:target {
  display: block;
}

CSS selector when :target empty

Sigh. I feel like I'm resurrecting a dead topic, but it needs a real answer.

It's possible to do this with CSS alone, just by using :last-child and a general sibling combinator, in the form of :target ~ :last-child:

.pages > .page:target ~ .page:last-child,
.pages > .page {
    display: none;
}

/* :last-child works, but .page:last-child will not */
.pages > :last-child,
.pages > .page:target {
    display: block;
}

The rules applies in the following steps:

hide all pages
show both targeted page and the last page
if a page is targeted, hide the last page (.page:target ~ .page:last-child)

(live example)

Edit: Apparently this is very similar to the accepted answer in an older, previously mentioned, related post.

An easier way to load a default slide (using css :target)

I've got a pure CSS answer which satisfies all of your criteria.

In the HTML, move the ids above the slide content
Continue to hide all slides by default
The intro-slide, by default, is set to display: block
If anything is targeted, hide the intro-slide
Override the previous bullet point's rule using the more specific:

#slide-1:target~.slide-1

Full code:

.slide {

  max-width: 200px;

  height: 200px;

  margin: 1em auto;

  padding: 1em;

  text-align: left;

  background: yellow;

  display: none;

}

:target~.intro-slide {

  display: none;

}

.intro-slide,

#slide-1:target~.slide-1,

#slide-2:target~.slide-2,

#slide-3:target~.slide-3,

#slide-4:target~.slide-4,

#slide-5:target~.slide-5 {

  display: block;

  animation: slidein 1s forwards;

}

@keyframes slidein {

  0% {

    opacity: 0;

    display: block;

  }

  1% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

div.intro-slide a {

  margin-left: 2.35em;

}

<div id="slide-1"></div>

<div id="slide-2"></div>

<div id="slide-3"></div>

<div id="slide-4"></div>

<div id="slide-5"></div>

<div class="slide slide-1 intro-slide">

  <h1>One</h1>

  <a href="#slide-2">Next</a>

</div>

<div class="slide slide-2">

  <h1>Two</h1>

  <a href="#slide-1">Back</a>

  <a href="#slide-3">Next</a>

</div>

<div class="slide slide-3">

  <h1>Three</h1>

  <a href="#slide-2">Back</a>

  <a href="#slide-4">Next</a>

</div>

<div class="slide slide-4">

  <h1>Four</h1>

  <a href="#slide-3">Back</a>

  <a href="#slide-5">Next</a>

</div>

<div class="slide slide-5">

  <h1>Five</h1>

  <a href="#slide-4">Back</a>

</div>

how to give target= _blank to all a tags in html

Specify a default target for all hyperlinks and forms on a page:

<head>
  <base target="_blank">
</head>

source

Is it possible to target no target in CSS?

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>

CSS : target an a tag element

You can use this selector

a[href="#myId"][aria-expanded="true"]

more info: https://www.w3.org/TR/CSS2/selector.html#attribute-selectors

Default :Target with CSS