Добавление первого и последнего класса в содержимое виджета 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>

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

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

Спасибо.

Answer 1

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

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

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

Answer 2

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

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

При $ i == $ number_of_items вы сравниваете макс с текущим, так что вы знаете, что последнийутверждение верно.

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