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