HTML and CSS Reference
In-Depth Information
This
CSS
selector says, “Add a black background to the paragraph ele-
ments that are the target”:
p:target { background: #000; }
Now, if the
URL
is adjusted to contain a fragment identifier, the
p:target
rule is triggered. The following screenshots show the same
page with two different fragment identifiers appended to the
URL
.
When the fragment is #one, the element with
id
value
one
matches the
p:target
rule and has a black background.
http://host/target.html#one
http://host/target.html#three
Changing the fragment identifier doesn't reload the page, so the
:target
pseudo
—
class makes it easy to create tabbed interfaces
like that in the next example.
You can adjust the
CSS
from the previous example so the paragraphs
are hidden by default but visible when they're the target:
p { display: none; }
p:target { display: block; }