css selector from child div to next adjacent div?

Question

If I have markup like this:

<div>
    <div class="one"></div>
</div>
<div class="two">

Is there any way in css that I can select class .two from class .one?

As in this fiddle.

What exactly are you trying to do here? I guess you want .two to turn red when you hover on .one right? — tumchaaditya, Jun 10 '13 at 06:37
yes that's what I want... of coarse this is just a demo for what i really want — Danield, Jun 10 '13 at 06:38
@Georgestocker actually that "duplicate" question is not what I'm asking at all. I know how to do what was asked there, in my question I was wondering if it was somehow possible to target a sibling-element (.two) of the parent element of .one..... and the answer I got was no, it's not possible — Danield, Jun 17 '13 at 07:54

score 1 · Accepted Answer · answered Jun 10 '13 at 06:42

1

What you are trying is not possible using only CSS, what you can do is you can re arrange the element like this

<div>
    <div class="one"></div>
    <div class="two">
</div>

And use

.one:hover + .two {
   /* Styles */
}

Else you can do is this (If you don't want to change the markup) Demo

div {
    width: 50px;
    height: 50px;
    background: pink;
}

.two {
    height: 20px;
    background: #000;
    width: 20px;
}

div:nth-of-type(1):hover + .two {
    background: #f00;
}

.one + .two {
    background: #f00;
}

answered Jun 10 '13 at 06:42

Mr. Alien

153,751
34
298
278

Note: div:nth-of-type(1) does not work in all browser(Hint: IE :P) – tumchaaditya Jun 10 '13 at 06:54
+1 Thanks. I had a feeling that this wasn't possible. Unfortunately your solution won't help in my case because the root div isn't empty. (That's why I wrote the markup like that in the first place.) I updated the fiddle in the question to emphasize this more clearly. – Danield Jun 10 '13 at 06:56
@Danield: then it can't be done; to target a sibling-element of the parent element would (obviously) require a parent-selector (which CSS still doesn't have, and won't (unfortunately) be usable with CSS 4's fast selectors). It looks like JavaScript is your only real option, unfortunately. – David Thomas Jun 10 '13 at 07:00
@Danield I got an idea that it won't be possible for you that's why I provided 2 closest ways which are possible using only CSS :) – Mr. Alien Jun 10 '13 at 07:13

score 0 · Answer 2 · answered Jun 10 '13 at 06:54

you can do using jquery

script type="text/javascript">

    $(function () {



        $(".one").mouseover(function () {
            $(".two").css("background","red")

        });



        $(".one").mouseout(function () {

            $(".two").css("background", "");
        });
    });

</script>

css selector from child div to next adjacent div?

2 Answers2