Добавление первого и последнего класса в содержимое виджета Wordpress

Question

В Wordpress я ищу способ добавить «последний» и «первый» класс для отображения элементов внутри виджетов Wordpress. HTML может выглядеть следующим образом:

<div class="widget-area"> 
<ul > 
    <li class="widget_recent_comments"> 
     <h3 class="widget-title">Recent comments</h3> 
     <ul id="recentcomments"> 
      <li class="recentcomments">Comment 1</li> 
      <li class="recentcomments">Comment 2</li> 
      <li class="recentcomments">Comment 3</li> 
      <li class="recentcomments">Comment 4</li> 
     </ul> 
    </li> 
    <li class="widget_my_links"> 
     <h3 class="widget-title">My links</h3> 
     <ul id="my-links"> 
      <li class="item">Link 1</li> 
      <li class="item">Link 2</li> 
      <li class="item">Link 3</li> 
      <li class="item">Link 4</li> 
      <li class="item">Link 5</li> 
     </ul> 
    </li> 
</ul></div> 

В этом примере выше я хотел бы иметь первые/последние классы добавлены к Ли с «Комментарий 1», «Комментарий 4», «Ссылка 1» и «Ссылка 5" .

Есть ли простой способ обхода? (Я не хочу делать это с помощью javascript)

Спасибо.

Answer 1

Я предполагаю, что эти списки генерируются в цикле. Итак, что вы можете сделать, это создать переменную, прежде чем вы перейдете в цикл, и установите для нее значение 1 ($ i = 1). Затем в конце цикла добавьте один вверх ($ i ++). Теперь, когда вы хотите, первый/последний класс появляться, вы можете сделать

<?php if($i == 1): 
    echo ' first'; 
elseif($i == $number_of_items) 
    echo 'last'; 
endif;  
?> 

В $ I == $ NUMBER_OF_ITEMS, вы сравниваете макс с током, так что вы знаете, что последний, если заявление правда.

Надеюсь, это ответит на ваш вопрос.

Answer 2

Ну первый элемент легко, просто использовать

ul#my-list li:first-child { 
    /* special styles */ 
} 

Это не добавляет класс, но вы все еще можете стилизовать. Существует не аналогичное правило css для :last-child, к сожалению