SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question about :target usage

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

    This...

    Code:
    :target {
      declarations
    }
    ...would modify the ID of:

    #section2

    ...of:

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

    Question: isn't this the same as:

    Code:
    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,821
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,555
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by StevenHu View Post
    #section2:target {...} is referring to an ID:
    <div id="section2"></div>

    ... in which case, why not simply use #section2 {...} ?
    #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.

    Code:
    <!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. #5
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,871
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by StevenHu View Post
    <a name="section2">
    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.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  6. #6
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    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.
    Thanks - I didn't know that. I'll make a note in my CSS notes!

  7. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul,
    OK, I see it changes color WHEN CLICKED ON.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •