In an interview with Jacob Gube from Six Revisions on the subject of exciting developments in CSS3, Eric Meyer said

 …the power to describe Web 2.0 designs in CSS is insignificant compared with the power to select every third table row starting with the fifth one.  Or being able to select the first paragraph within another element, even if it’s not the first child.  Or selecting any list item that’s the last item in the list.

Eric made it pretty clear that selectors were the cool thing in CSS3. And while I’ll admit that border-radius gradients, media queries and the like are pretty nifty, I kinda have to agree. The CSS3 selectors and pseudo-classes give a whole new level of functionality that used to exist only with the aide of JavaScript. One of those pseudo-classes is :target, and I’ve got a nifty JavaScript-free way to create expand-collapse sections

What is :target ?

To be clear :target is a pseudo-class, not a pseudo-selector. Because of syntax, though, pseudo-classes and pseudo-selectors are often grouped together. I don’t think Eric Meyer would mind me extrapolating his comment to include pseudo-classes.

When you read the specs, you’ll see that it represents an element that’s the target of the referring URI. But if that doesn’t quite make sense, let’s try it this way. You have a table of contents on a page. In order to link to a section, you write something like this <a href="#sectiona">Section A</a> . Once the user has clicked the link, the :target pseudo-class now applies to whatever had that id of sectiona. Essentially, :target tells you that the element was the target of a link.

Great, :target is moderately nifty for glossaries and tables of contents — so what?

Yeah, :target was probably meant for glossaries and whatnot, but who says we can’t think outside of the box? After all, it’s a way of activating an element through CSS instead of JS!

So let’s assume the following:

Article one

subheading
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,

So, we have an article, and in it we’ve wrapped the juicy part of the content in this non-semantic div. When you click the link in the heading, that div gets that pseudo-class :target.

So, let’s apply this to every div with a class of .content:

section article > div.content{
display:none;
}

So now, by default, we don’t see the content, we only see the heading. Now, to see the actual content of the article, all we need is this:

section#demo article > div.content:target{
display:block;
}

Now, if you have concerns about using display:none because of SEO or screenreaders, there’s nothing wrong with applying visibility:hidden /visibility: visible, either.

section article > div.content:target{
display:block;
}

Demo Please

​

What About animating with :target?

You can pull off all sorts of nifty UI enhancements with animations using :target. However, I’m not so sure about this one. Animation keyframes don’t seem to work between display:block / display: none or visibility:hidden / visibility: visible. I’ve been experimenting with different animation methods and I haven’t yet found one that works in this case. Another challenge, is height: auto. It doesn’t look like you can animate to an auto-height, but you can animate to a height with an absolute value. I’m sure that there are some other clever CSS tricks to accomplish this, though.

Exactly how useful is this?

While I’d consider this a clever CSS3 trick, it’s usefulness lies between IE9 and browsers that don’t yet support summary and detail. Considering that webkit appears to be the only browser that’s using summary and details, this seems like a solid modern-browser, JavaScript-free approach.