Question

I’m developing a List of four items. Each item needs to have a top and bottom border with a default of 1px solid grey. Theres a javascript roator which will add a ‘highlighted’ class to the selected list element. The selected list element needs to be 2px solid blue. I’ve got the rotation working and the basic styling when not being selected. I tried to apply a second class with jquery (infoHighlighted) to over ride the borders but this doesn’t seem to work. Additionally, I’m stuck on how to remove the grey bottom border from the previous element…I know this should be simple I just can’t wrap my head around it.

EDIT – To clarify, the highlight issue is now solved thanks to HardyHarzen. My last issue is that the previous list elements lower border needs to be removed so that the highlight doesn’t have the previous elements 1px lower grey border just above it.

.sideBox {
    width: 225px;
    float: right;

}

.sidebox ul {

    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
}

.sidebox li {
    height:124px;
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #666;
}


.sidebox li:first-child{
    height:123px;
    border-top: 1px solid #666;
    border-bottom: 1px solid #666;
}

.sidebox h4, .sidebox p
{
    margin: 0;
    color: #707070;
    padding:0;
    font-size: 25px;
}

.infoHighlighted {
    border-top: 2px solid #00A4E4;    
    border-bottom: 2px solid #00A4E4;    
}
.infoHighlighted h4 {
    color: #00A4E4;
    font-family: Georgia;
    font-size: 25px;
}
  <div class="sideBox">
                    <ul>
                        <li id="infoBox_0" class="infoHighlighted"><h4>Header Here</h4><p>One Sentence</p></li>
                        <li id="infoBox_1"><h4>Header Here</h4><p>One Sentence</p></li>
                        <li id="infoBox_2"><h4>Header Here</h4><p>One Sentence</p></li>
                        <li id="infoBox_3"><h4>Header Here</h4><p>One Sentence</p></li>
                    </ul>
               </div>

Answer 1

First part is easy: CSS specificity! One class < one class + an element. So change “.infohighlighted” into e.g. “.sidebox li.infohighlighted” and your basic highlighting should work.

I’m not sure what you mean by “Additionally, I’m stuck on how to remove the grey bottom border from the previous element”, please elaborate.

PS: Also, there are some case mismatches in there — sidebox vs sideBox.