Default :target with CSS

Question

I have this CSS:

<style type="text/css">
.tab {
  display: none;
}
.tab:target {
  display: block;
}
</style>

And this HTML:

<div class="tab_container">

  <ul class="tabs">
    <li><a href="#updates-list">List</a></li>
    <li><a href="#updates-map">Map</a></li>
  </ul>

  <ul class="tab list" id="updates-list">
    Eh.. Hello!
  </ul>
  <div class="tab map" id="updates-map"></div>
</div>

However, my page is empty if no target (# in URL) is specified and no tab is clicked yet. I want to show ul#updates-list by default.

How can I do this? Thanks.

---

Update: Next to this, my Google Map is broken if it is not the initial target. Does anyone know a fix?

Answer 1

think this might be too much logic for css, in which case you need to resort to javascript

Answer 2

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

Answer 3

I guess what you would want to do is select something like .tab_container:not(> :target) > .default to display the default tab when no one is targeted. However, this is not possible since the :not() pseudo-class only takes simple selectors (i.e. just :target, not > :target, in which case you would check the target of the container, not the children).

I would do either of the following:

• Use Javascript to set the target to the first tab at load (or just require that the anchor is present).

• Add a specific override class for the first active tab and remove it (again with Javascript) after the first tab switch.

The first alternative will mess with the browser history while the second will be a bit more of a code mess. I can't think of a "perfect" solution right now. Maybe you're better off just using Javascript altogether to detect the current target in order to both get compatibility with non-CSS3 browsers and to solve this particular issue in a somewhat clean way?