CSS selector when :target empty

Question

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!

Kit Law · Accepted Answer · 2019-09-27 14:06:22Z

36

+100

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.

edited Sep 27, 2019 at 14:06

Kit Law

131 silver badge2 bronze badges

answered Mar 21, 2012 at 20:16

rummik

6106 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

michael Over a year ago

Took a while to realise what was going on in your answer but now that I understand it, it seems like a very elegant solution

BoltClock Over a year ago

It is misleading to say that it is possible with CSS alone. In particular, this falls flat in its face when the "default" element you want to show is not the last child of its parent. How would you propose solving that problem with CSS alone then?

gilly3 Over a year ago

@BoltClock - Well, CSS and HTML alone. I think the point is it does not require JavaScript, which is nice.

rummik Over a year ago

@BoltClock It would be possible with :has(), but no browser I know of implements this. caniuse.com/#feat=css-has It would look something like:

.pages > .page { display: none; } .pages:not(:has(.page:target)) > .page.default, .pages .page:target { display: block; }

BoltClock Over a year ago

@rummik: The reason no browser implements :has() in CSS is because :has() has been excluded from CSS by the spec. The reason :has() isn't in CSS is because no one wants to take a stab at implementing it in CSS. If it ever gets implemented you'd probably still need JavaScript - but at least it'll involve less boilerplate JS then. One can hope...

|

jfriend00 · Accepted Answer · 2011-07-29 00:44:10Z

1

All I can think of is that you have some javascript that checks to see if the hash is empty. If so, it adds a class to the body tag called "noHash". Then, you can use the fact that there is the noHash class available in your CSS rules.

if (window.location.hash.length <= 1) {
     document.body.className += " noHash";
}

Then, your CSS could be like this:

div {
  background: blue;
}
div:target, body.noHash div {
  background: red;
}

If there's any circumstance where a user might add a hash value after the fact, then you may have to watch for that to make sure the noHash class gets removed appropriately.

Note: you don't have to add the class name to the body tag. You can add it to any parent object that covers all the objects you wish to affect.

edited Jul 29, 2011 at 0:44

answered Jul 29, 2011 at 0:36

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

3 Comments

BoltClock Over a year ago

Yeah you can't do this with CSS alone.

Rik de Vos Over a year ago

I was looking for a solution without javascript

jfriend00 Over a year ago

@Rick de Vos - Good luck then. From my read of the spec (w3.org/TR/css3-selectors/#target-pseudo), your problem is that when there's no hash in the URL, all elements match no target which isn't what you want. I don't think CSS3 does what you asked for. There does not appear to be any way to match a class only when there is a hash in the URL that doesn't match that element. Whatever CSS you try for that will match also when there is no hash in the URL.

Community · Accepted Answer · 2017-05-23 12:32:54Z

1

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?

edited May 23, 2017 at 12:32

CommunityBot

11 silver badge

answered Aug 29, 2011 at 6:38

psayre23

3,0742 gold badges18 silver badges10 bronze badges

Comments

Mike B · Accepted Answer · 2023-11-23 12:33:02Z

1

With the :has selector gaining adoption, the following works (add a "default" class to the section to display when no target)

section {
    display:none
}
section:target, :root:not(:has(:target)) section.default {
    display: block
}

As of Nov 2023 this works in Safari/Chrome, not yet Firefox but presumably won't be long

answered Nov 23, 2023 at 12:33

Mike B

1,6871 gold badge13 silver badges10 bronze badges

Comments

Knu · Accepted Answer · 2011-07-29 04:42:18Z

0

Why don't you use div:not(:target) or div:target:empty?

answered Jul 29, 2011 at 4:42

Knu

15.2k6 gold badges60 silver badges93 bronze badges

1 Comment

vsync Over a year ago

:empty has nothing to do with the topic actually. Also, I tried :not(:target) and it didn't work

Collectives™ on Stack Overflow

CSS selector when :target empty

5 Answers 5

6 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related