Question about :target usage

HTML & CSS
1

We learn about :target on this page: http://reference.sitepoint.com/css/pseudoclass-target

This…

:target {
  declarations
}

…would modify the ID of:

#section2

…of:

http://www.example.com/index.html#section2

Question: isn’t this the same as:

a name { ... }

Or would it modify every target ID on the page?

Or should it have been written in the example as:

#section2:target

2

that’s some tricky wording there. If I understand your question correctly you are asking why that rules targets(pun) the pseudo class generally, as opposed to a specific id.

Think of it this way… :target is a pseudo class that is “added” to an element that matches a fragment identifier(“#whatever”) present in the URI.

so, when the uri is: http://www.iana.org/domains/example/#section2
it would be AS IF <div id=“section2”></<div id=“section2” pseudoclass=“taget”></div><div id=“section3”></div>
and when the uri is: http://www.iana.org/domains/example/#section1
it would be AS IF <div id=“section2” pseudoclass=“taget”></<div id=“section2” ></div><div id=“section3”></div>

in a sense this pseudoclass is unique to the even of that section being selected, so it is not entirely necessary to add the targeted #ID unless that was the ONLY target you had in mind.

Let say for example you had a page with 5 sections and a navigation sidebar on the left with links to the ID of each sections ( do note that anchor tags are optional!)
you want the background of any targeted element ( the section headers, which the navigation is linked to) to be pink.

:target {background: pink;} (as opposed to #hed1:target,#hed2:target ,#hed3:target ,#hed4:target {background: pink;})
will do just nicely.
Of course, had more specific needs,let say the second header needed to be an exception and thus be purple.
:target {background: pink;}
#hed2:target {background: purple;}

also if there are links to other element other than headers in the then it is safer to write more specific rules:
.section h2:target {background: pink;}
.section #hed2:target {background: purple;}

I hope that clarifies things for you. :slight_smile:

3

OK, I understand now. I was thinking that http://www.iana.org/example/#section2 was a link to <a name=“section2”> - a target being an HTML bookmark!

#section2:target {…} is referring to an ID:
<div id=“section2”></div>

… in which case, why not simply use #section2 {…} ?

4

#section2{…} would style that element irrespective of whether it was the target or not.

:target only styles an element when it has been reached by a fragment identifier.

Run this short example to see how it works.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
:target { background:red }
#section2:target { background:green }
</style>
</head>

<body>
<p><a href="#section1">Go to section 1</a> | <a href="#section2">Go to section 2</a> | <a href="#section3">Go to section 3</a> | <a href="#section4">Go to section 4</a> </p>
<p id="section1">Section 1</p>
<p id="section2">Section 2</p>
<p id="section3">Section 3</p>
<p id="section4">Section 4</p>
</body>
</html>

The element that has been targeted will have a red background except for section2 which will have a green background because it is preceded by the id.

:target { background:red }
#section2:target { background:green }

This example shows how useful :target can be and uses no scripts to accomplish the hide and show (click the read more button).

5

You can get rid of the name attributes on all your <a> tags and replace them with ids - unless you have a particular need to still support Netscape 4. All browsers since Netscape 4 have replaced the name attribute on <a> tags with an id on any tag as the destination for a targetted link.

6

Thanks - I didn’t know that. I’ll make a note in my CSS notes!

7

Paul,
OK, I see it changes color WHEN CLICKED ON.