View Full Version : Styling an HTML list class within a class using CSS

08-02-2011, 08:43 PM
I have a sidebar list on a HTML page. When you are on a certain list item the active item should be a different colour from the other items.

The final list item has its own class and I am unsure as to how to apply the active sidebar CSS styling without interfering with its existing class.

I have attached a copy of the list along with the associated styling for all the elements below:-

The HTML list

<ul class="arrowList">
<li><a href="index.html" title="">Home</li>
<li><a href="page1.html" title="">Page 1</li>
<li><a href="page2.html" title="">Page 2</li>
<li><a href="page3.html" title="">Page 3</li>
<li class="activeSidebarItem">Page 4</li>
<li class="noBottomBorder"><a href="page5.html" title="">Page 5</a></li>

The relevant CSS

.noBottomBorder {
border-bottom: none !important;
overflow: hidden;

ul.arrowList {
background: url('../img/sidebarGradBG.png') 0 0 repeat-x;

ul.arrowList li {
border-bottom: 1px solid #e1e5e9;
padding: 14px 20px;
background: url('../img/sidebarPointRed.png') 92% center no-repeat;

li.activeSidebarItem {
background: url('../img/sidebarPointDark.png') 92% center no-repeat !important;
font-weight: bold;
color: #62656b;

Can anyone help?

Sorry for the poor use of any terminology that may exist.



08-02-2011, 09:21 PM
note : you can do:

class = "classa classb"

And both styles are applied to element.

That might help you in your direction

08-02-2011, 09:39 PM
Thanks for that. It totally worked.

However, It has now changed the entire colour of the main content.

Do you think this is to do with the overflow:hidden in the noBottomBorder class and if so how could I go about sorting it?