Menu
I have an unordered list I'm using for a menu. Each item has a background image and a :hover image. The background image on the first element is different that the rest, so I use the following to style it, which works fine:
#prodNavBar ul:last-child li:first-child {...} Since I want a roll-over image on this element as well, I've tried adding :hover, like so:
#prodNavBar ul:last-child li:first-child:hover {...} ...but this doesn't work. What's the syntax to combine :first-child and :hover?
904
The :first-child pseudo class means "if this element is the first child of its parent". :last-child means "if this element is the last child of its parent". Note that only element nodes (HTML tags) count, these pseudo-classes ignore text nodes. This is the div id="test".
Use the :not(selector) Selector Not to Select the First Child in CSS. We can use the :not(selector) selector to select every other element that is not the selected element. So, we can use the selector not to select the first child in CSS.
The :first-child selector allows you to target the first element immediately inside another element. It is defined in the CSS Selectors Level 3 spec as a “structural pseudo-class”, meaning it is used to style content based on its relationship with parent and sibling content.
Chaining :first-child and :hover as you do here should work just fine. If you're using IE6, however, only the last pseudo-class in the chain will be recognized.
In other words, you're doing it right.
174
li:first-child:hover should work. Which browser are you testing with? IE doesn't support last-child
Here is a sample test case.
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
