2

I know how can I make "parent hover, child action" with

.parent:hover > .child{background:#a4d186;}

but I want this if possible:

.parent < .child:hover{blabla}
BoldClock
  • 41
  • 5
  • 2
    sorry I am new. but thanks – BoldClock Sep 01 '14 at 07:51
  • If child is hovered, so is the parent. Does this not work for you? – Salman A Sep 01 '14 at 07:53
  • @Salman A it selects child too. I only need it to effect parent. – BoldClock Sep 01 '14 at 07:57
  • 1
    As stated above, CSS does not (currently) provide you a mechanism to select parent. If you can edit your question and state what you are trying to achieve may be someone could provide an alternate method. jQuery could be used, if that is an option. – Salman A Sep 01 '14 at 08:06

1 Answers1

2

There's no selectors like that yet but you can use "~" selector. Here's an excerpt from w3.org

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

So you can do it like that:

HTML:

<div class="parent-like-div">Do Something</div>
<div class="to-be-controlled">Control me</div>

CSS:

.parent-like-div:hover ~ .to-be-controlled
{your code apply on .to-be-controlled when you hover .parent-like-div}

http://jsfiddle.net/h7grfeod/

Anulot
  • 55
  • 8
DifferentPseudonym
  • 1,004
  • 1
  • 12
  • 28