target Selector
CSS target Selector reference
The CSS target pseudo-class selector ( X:target { } ) is used to alter the style of an element when it is the document uri target. This is most commonly applied when you have long documents in which there is internal document navigation leading users to specific sections of the document.
CSS CODE EXAMPLE
<!DOCTYPE html>
<style type="text/css">
p:target {
color:#F00;
}
</style>
<a href="#s1">Section 1</a> •
<a href="#s2">Section 2</a> •
<a href="#s3">Section 3</a> •
<a href="#s4">Section 4</a>
<p id="s1">Document section 1...</p>
<p id="s2">Document section 2...</p>
<p id="s3">Document section 3...</p>
<p id="s4">Document section 4...</p>
Demo Hint: To see the effect of this start clicking my document section links below.<style type="text/css">
p:target {
color:#F00;
}
</style>
<a href="#s1">Section 1</a> •
<a href="#s2">Section 2</a> •
<a href="#s3">Section 3</a> •
<a href="#s4">Section 4</a>
<p id="s1">Document section 1...</p>
<p id="s2">Document section 2...</p>
<p id="s3">Document section 3...</p>
<p id="s4">Document section 4...</p>
0 Response to "target Selector"
Post a Comment