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.
There is a great answer for this over at default-target-with-css
It revolves around this trick that seems to have problems in iOS. It's been fixed in Safari, so maybe it'll be in iOS 5?