SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    How can I tell the 2nd .yada to popup when the first .yada has focus?

    How can I tell the 2nd .yada to popup when the 1st .yada has focus?

    .yada:focus {
    left:0;
    }

    <p><a href="#" class="yada"></a></p>
    <p><a href="#" class="yada"></a></p>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,

    Untested, but maybe you can use the sibling selector.

    Code:
    p a.yada:focus + p a.yada {
    left:0;
    }

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray I'll try that!

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Well it didn't work. You can't seem target a sibling child like that.

    However, if you can get your "a" out of that "p" tag it will work.

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
     
    <style type="text/css">
    body {
        background: #fff;
        font-size:100%;
    }
    #wrap {
        width:400px;
        margin:0 auto;
        background:#EEF
    }
    a {display:block}
     
    a + a {
    margin-left:-100px;
    }
    a:focus + a {
    margin-left:0;
    }
    </style>
    </head>
    <body>
     
    <div id="wrap">
        <a href="#" class="yada">yada</a>
        <a href="#" class="yada">yada</a>
    </div>
     
    </body>
    </html>

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Perfect! That seems to work well - thanks bro.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Oh the first one worked for me. I just ommitted the p in the css.

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I highly doubt it, but is there anyway to target the .yada prior to the .yada with focus? So this one targets the one after...

    .yada:focus + .yada {}

    But can I target the .yada before (in the HTML) the one with focus?

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    But can I target the .yada before (in the HTML) the one with focus?
    No, you can't back up the html source like that.

    Quote Originally Posted by EricWatson View Post
    Oh the first one worked for me. I just ommitted the p in the css.
    Take that test code I posted (my last post) and show me what you did real quick.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    I did it like this...

    .yada:focus + .yada{
    left:0;left:0;
    position:absolute;
    z-index:10;
    }

    <p><a href="#" class="yada"></a></p>
    <p><a href="#" class="yada"></a></p>

  10. #10
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ah, okay you had them AP'd.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,292
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by EricWatson View Post
    I did it like this...

    .yada:focus + .yada{
    left:0;left:0;
    position:absolute;
    z-index:10;
    }

    <p><a href="#" class="yada"></a></p>
    <p><a href="#" class="yada"></a></p>
    That shouldn't work and doesn't seem to either

    The other anchor isn't adjacent and therefore cannot match. You can only match the ones under the same parent as per Rays example.

    Safari is very buggy using pseudo classes on adjacent or sibling selectors and either won't work at all or works bugilly,

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Duh... I had my wires crossed again. To many things I'm working on - that set up was my other. Ray, Paul, your right. All my a's (.yada's) were in the same container (no p's).

    Not that I even need it (right now anyways), but there is no way (even with css3) to target the .yada in another container? Thanks!

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Nope . You can't work your way back up the ancestry and then select an adjacent element.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work


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
  •