Вертикальный список с подсветкой верхнего и нижнего края

Question

Я разрабатываю список из четырех предметов. Каждый элемент должен иметь верхнюю и нижнюю границу со значением по умолчанию 1px сплошной серый. Theres - javascript roator, который добавит «выделенный» класс к выбранному элементу списка. Выбранный элемент списка должен быть 2px сплошным синим. У меня есть поворот и основной стиль, когда он не выбран. Я попытался применить второй класс с jquery (infoHighlighted), чтобы преодолеть границы, но это, похоже, не работает. Кроме того, я застрял в том, как удалить нижнюю границу серого из предыдущего элемента ... Я знаю, что это должно быть просто, я просто не могу обернуть вокруг себя голову.

EDIT - Чтобы уточнить, проблема с подсветкой теперь решена благодаря HardyHarzen. Моя последняя проблема заключается в том, что элементы предыдущего нижнего края должны быть удалены, так что в выделенном объекте нет предыдущих элементов. 1px нижняя серая граница над ним.

.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

Первая часть проста: специфика CSS! Один класс < один класс + элемент. Так что измените «.infohighlighted» на, например, «.boxbox li.infohighlighted», и ваша основная подсветка должна работать.

Я не уверен, что вы подразумеваете под «Кроме того, я застрял на том, как удалить серое нижнее поле с предыдущего элемента», пожалуйста, уточните.

PS: Кроме того, есть некоторые несоответствия в работе - боковая панель и боковая панель.