I am working on a list that contains four items. Each item should have top and bottom borders set to 1px solid grey by default. There is a JavaScript rotator in place that adds a 'highlighted' class to the selected list element, which should have borders of 2px solid blue. Although I have managed to get the rotation functioning and the basic styling for unselected elements, I am facing an issue with applying a second class (infoHighlighted) using jQuery to override the borders. Additionally, I am struggling to figure out how to remove the grey bottom border from the previous element. This seems like it should be simple, but I am having trouble grasping it.
UPDATE - The highlighting problem has been solved thanks to HardyHarzen's help. My remaining challenge is to remove the lower border of the previous list element so that the highlight does not display the 1px lower grey border of the element 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>