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.
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; }
Search WWH ::

Custom Search