Search code examples
csscss-selectors

CSS selector when :target empty

I need a css3 selector to target an element when the :target equals the id of the element (easy) or when the :target is empty (impossible?). It’s hard to explain, so let me give you a simple example.

div {
  background: blue;
}
div:target, div:no-target {
  background: red;
}

But of course the :no-target pseudo class doesn’t exist ;). Is there a way around this without using Javascript? Thanks in advance!

Solution

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

    1. hide all pages
    2. show both targeted page and the last page
    3. 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.