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

HTML & CSS
1

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

Hi Eric,

Untested, but maybe you can use the sibling selector.

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

Thanks Ray I’ll try that!

4

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.

<!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

Perfect! That seems to work well - thanks bro.

6

Oh the first one worked for me. I just ommitted the p in the css.

7

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

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.

Take that test code I posted (my last post) and show me what you did real quick.

9

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

Ah, okay you had them AP’d.

11

That shouldn’t work :wink: and doesn’t seem to either :wink:

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

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

Nope :). You can’t work your way back up the ancestry and then select an adjacent element.