troubleshooting Question

How to stop a style being overridden by another style

Avatar of alex_wareing
alex_wareing asked on
CSSHTML
4 Comments1 Solution296 ViewsLast Modified:
I know this problem has to do with the order of selection but i'm not quite sure what the rigt way to do this is. Here is my HTML:
<p class="paging"><a href="#">&laquo;</a>&nbsp;<a href="#">1</a>&nbsp;<a href="#" id="pagingSelected">2</a>&nbsp;<a href="#">3</a>&nbsp;<a href="#">4</a>&nbsp;<a href="#">5</a>&nbsp;<a href="#">6</a>&nbsp;<a href="#">7</a>&nbsp;<a href="#">&raquo;</a></p>

And my CSS:
.paging a {
      border:1px solid #CCCCCC;
      padding:1px 5px 1px 5px;
      color:#666666;
}
.paging a:hover {
      text-decoration:none;
      border:1px solid #000000;
}
.pagingSelected {
      background-color:#006600;
}

The problem i'm having is getting the .pagingSelected style to work. What am i doing wrong. I tried selecting using the following:
.pagingSelected
a.pagingSelected
.paging .pagingSelected
.paging a.pagingSelected

None seemed to work, where am i going wrong?
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 4 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros