HTML and CSS Reference
In-Depth Information
Fragment identifiers were introduced in the “Hyperlinks“ section in Chapter 3. In that
chapter, an example was given for an anchor element:
<a href="newpage.html#parttwo">link</a>
This element links to a specific HTML element on the linked page by matching the
fragment identifier #parttwo with the id attribute value partwo , so the page would
be scrolled to an element such as this one:
<h3 id="parttwo">Part Two</h3>
Since this is using a fragment identifier, this element could be styled using the :tar-
get selector. This selector's style rule will apply to any element that is a target of the
fragment identifier that appears in the URL (which should be only one element on the
page):
:target { text-decoration:overline; }
When the fragment identifier appears in the address bar URL of the page, the element
on the page that is being targeted will receive the styling of the :target selector rule.
Remove the fragment identifier from the URL, and the style disappears. This is partic-
ularly useful in situations where the user could scroll away from the targeted element;
by styling it differently, it could be made so that the user wouldn't lose sight of it if they
were looking for it again (styles could be added to go so far as to fix the targeted element
in place, so it would remain in view even if the page scrolled 1 ) .
___________
1 This is done using the position:fixed property and value, which will be touched upon later in the
chapter.
 
Search WWH ::




Custom Search