Here's a dummy piece of code as an example :
<div id="parent">
<div class="child" id="childA"></div>
<div class="child" id="childB"></div>
<div class="child" id="childC"></div>
</div>
I am trying to style the children when hovering their parent. Except, I want to do so with the nth-child selector.
I can make what I want with this syntax :
#parent:hover #childA {
/* styling stuff */
};
But everything break when I try to use this one :
#parent:hover #parent:nth-child(1).child {
/* styling stuff */
};
Note that doing so
#parent:nth-child(1).child {
/* styling stuff */
};
Does indeed apply the style to #childA
Thus, my question is :
Why using #parent:nth-child(1).child doesn't capture #childA to apply style (when put after #parent:hover), and how can I fix this behaviour ?
I already tried all selector combination that I could think of but nothing happened. (+, >, blank, ~, getting rid of the .child at the end, chaining the :hover:nth-child(), ...)
I also reviewed all questions already asked on the subject I could find, but no one seems to have wrote about this specific use-case.
To be clear : My problem only occur when using nth-child after :hover.
Answer
You should be able to combine the pseudo classes like this:
#parent:hover:nth-child(1).child {
/* styling stuff */
}
Note: you do not need a semi-colon after the closing }.
The key part is removing spaces between the colons:
#parent:hover:nth-child(1).child
^^^^^^^^^^^^^^^^^^^
(no spaces)