CSS a property for specific id pseudo class?

Question

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;
}

Answer 1

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).

Answer 2

Use the parent id as part of the selector:

#parentId a {
    /* specific CSS styles */
}

JS Fiddle demo.

This isn't a pseudo-class, of course (that encompasses such things as :hover, :checked, :focus), or a pseudo-element (which would be ::before and ::after). This is simple inheritance, selecting an element based on an ancestor, and is what the space implies between the #parentId and the a.

You could, instead, use the > immediate child combinator if there were no other ancestors/descendants between the div and the a.

References:

• CSS selectors, at the W3.org.