Comments on CSS :target

By: SchizoDuckie

2012-12-08T11:52:29Z

Probably somewhere between 2020 and 2030. And then you’ll still have to wait for adoption rate…

By: JW

2012-12-07T13:28:20Z

When do you guys expect Internet Explorer will have full support for these kind of elements?

By: SchizoDuckie

2012-12-01T10:02:44Z

Using :not(:target) gives you even more flexibility, because you can also style the elements that are not :target, and even apply transitions to them :)

http://jsfiddle.net/SchizoDuckie/fzZ9d/

By: Dr.Death

2012-11-30T18:45:14Z

@Gabriel Rodriguez i think accordion better for faq page

By: Gabriel Rodriguez

2012-11-30T17:14:56Z

@DrDeath, quite limited imagination. How about a FAQ Page that has all the questions first and the answers at the bottom? If there are many, using :target to highlight the answer for the question that you clicked would make it easy, since several answers would be shown on the screen at the same time.

By: Joe

2012-11-30T13:21:33Z

I was aware of :target, but this has prompted me to use it for a great use case: help docs.

Now I can just link people to the ID of a specific part of a help guide and it will automatically highlight the relevant passage.

Perfect.

By: Jean Ceugniet

2012-11-30T11:38:38Z

The only problem right now is bad support in IE, which doesn’t remove or re-add the pseudo-class when you use back and forward navigation.

By: Jens Schmidtgen

2012-11-30T10:08:02Z

very good idea!
Even for dynamic pages.

http://jsfiddle.net/b3YEk/17/

By: Yin

2012-11-30T04:12:59Z

Not sure if I can think of a good use for this yet, but it’s great to read about it. I think the code:
h2:target { color: #f00; }
should be
h2:target { background: #f00; }

By: Eric Wendelin

2012-11-30T01:45:21Z

Another valid use I’ve come across is accordion widgets.

By: Revin Guillen

2012-11-29T19:10:55Z

SVG stacks use :target to great effect. Too bad they’re not more widely useful yet.

By: Dr.Death

2012-11-29T16:19:03Z

First thing for :target use that comes to mind “tabs” nothing else…

By: Alexandre Mercier

2012-11-29T16:16:40Z

Hi David,

I think one of the reason that make this technique hard to use in large websites could be the unability to create multi-level lists with this :

Example :

Four links in 2 categories
- #category1-link1
- #category1-link2
- #category2-link1
- #category2-link2


    Category 1
      Link1

      Link1

    Category 2
      Link1

      Link1

Then, this way you can style the 2nd-level links (#categoryX-linkY), but how can you know how to style #category1 and category2? You can’t. Because #category1:target and #category2:target never happen.

The only solution I see is parent selectors but it’s not even implemented in browsers yet.