CSS a property for specific id pseudo class?
css, css-selectors, hover, pseudo-class
Solution
IDs, classes and pseudo-classes are different things, and CSS has different notations for all three:
- ID selector
- Class selector
- Pseudo-class
If you want to apply this particular `:hover` (which is a pseudo-class) only when `a` is a `div` with class `router_li` (as in `<div class="router_li">`), use
.router_li a:hover
That's a class, though; if it's an ID (as in `<div id="router_li">`), use
#router_li a:hover
In both cases, `router_li` is not a pseudo-class since it is defined in the markup and not in CSS, so the `:router_li` in your code is invalid. Also notice that the ID/class (whichever it is) comes before the `a:hover` - this is called a contextual selector (`a` only when it's in a certain `div`).
Problem
Any one know how to apply a css propert to the a tag, but only when it's in a certain div? I would like the .router_li div to have the hover effect, but any other links. I'm not sure what this is called. I think it's called a pseudo class, and I'm not doing it right. I tried this: ``` a:router_li:hover{ background-color:yellow; width: 200px; height: 60px; background-color: #2c5fac; border: 1px; border-color: #FFFFFF; border-top-right-radius: 8px; border-top-left-radius: 8px; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; border-style:solid; border-width:1px; color: white; } ```