Targeting the first element in css & lt; element & gt; + & lt; element & gt;

advertisements

In css there is the adjacent selector + - however does anyone know how I would target the first element in that selector.

i.e. I want to target the <div> in the following selector:

div + p

Thanks in advance


There no css selector for this but you can achieve this some css & html manipulation. Write like this:

HTML

<div class="parent">
   <p>hover me</p>
   <div>hello</div>
</div>

CSS

.parent{
    -moz-box-orient:vertical;
    -moz-box-direction:reverse;
    display: -moz-box;
    -webkit-box-orient:vertical;
    -webkit-box-direction:reverse;
    display: -webkit-box;
    box-orient: vertical;
    box-direction: reverse;
    display:box;
}
p{
    color:red;
}
p:hover + div{
    color:green;
    font-size:30px;
}

Check this http://jsfiddle.net/LEh2W/1/

May be that's help you but it's not work in IE.