one of the cooler features added in CSS3 was the :target pseudo-selector. it lets you assign style to an element based not on a transient condition like older pseudos, but on whether that element is the one named in the # URL suffix.

this means that if you have a rule #box:target in index.html, it will be applied whenever the url points to index.html#box. this is significant because it is yet another form of state - in essence, CSS now has access to a single global variable that can be set by user action.

it's tempting to use this feature to, for instance, switch between pages of a form without using javascript or having to load another page from the server, with all the wait time, cookies, parameter tracking, and other bullshit that entails.

however, there's a problem. the reason html *has* targets is so that users can be directed to a specific place on a long page. it lets you implement tables of contents, for instance. so whenever you click on a link to a target, the page will jump so as to place that target at the very top of the screen.

this is a problem for a lot of :target use cases; there's no simple way to disable this behavior without resorting to javascript, so most keep just keep using javascript anyway to show and hide their elements without fucking around with the :target class.

however! there is one exception to the jumping behavior, and that is if the element targetted cannot be placed at the top of the screen - that is, if it has the property position: fixed.

this lets you do some nifty hacks, such as the gracefully degrading, printer-friendly endnote popup system i use for some of my writing.

but, if you want to use it to show and hide and element that's inline, that moves with the rest of the page and that the browser can move to the top of the screen, the position:fixed trick doesn't help you.

not on its own, anyway.

a CSS operator that's particularly useful in gross hacks like these is the + operator. when you say, for instance, p + h1 you tell the browser to select all <h1> elements that directly follow a <p> element.

what does this mean? click here to find out.

the way we accomplish this involves a number of css rules. the first one creates a class called .tag, which you apply to an empty div. this class has two key properties: position:fixed which prevents the browser from jumping to it, and display:none which keeps from ever appearing.

the next rule needs to target the div we want to show or hide. its selector is .tag + div, which selects the first div to follow any instance of the .tag class. we set it to display:none and give it whatever other properties we want it to have.

finally, we need to write a rule that selects a popup div when its accompanying div.tag's anchor is activated. we select these boxes with .tag:target + div and set display to block, inherit, inline-block, or whatever else we want it to be.

.tag { position: fixed; display: none; }
.tag + div { display: none; }
.tag:active + div { display: block; }

<div class="tag" id="box"></div>
<div>
	<p>your hidden content</p>
	<a href="#0">hide</a>
</div>
<a href="#box">show</a>
			

the html is fairly straightforward to set up, compared to most css hacks. you just need an empty div of class tag with the id property set to the anchor name you want to use, followed immediately by a div element containing the content whose visibility you want the anchor to control.