HTML and CSS Reference
In-Depth Information
Styling the page based on the target of the URL
Fragment identifiers
—a string after a # symbol—are often used to iden-
tify sections within a long document, such as the table of contents at
the top of a Wikipedia article. When the label in the fragment identifier
matches an
ID
in the document, the browser scrolls the page down to
where that element is displayed.
In AJAX apps, the current state of the application is often
maintained through a fragment identifier to allow easy
bookmarking, as in the following GMail URL.
Fragment
Identifier
Hostname
https://mail.google.com/mail/?shva=1#inbox
1#inbox
Protocol
Parameters
If the
URL
has a fragment identifier, then the element with the
ID
matching it can be given special styling with the
:target
pseudo-class.
This is useful for slideshows and tab-based interfaces.
This example uses four paragraphs,
each of which has an
id
attribute:
<p id="one">I never am really satisfied
that...</p>
<p id="two">In almost every computation
a...</p>
<p id="three">Many persons who are not
conversant...</p>
<p id="four">The Analytical Engine has
no pretensions...</p>
This is what the page looks like if you
load it into your browser with a bare
URL
:
http://host/target.html
