Как выбрать первый и последний элемент по классу?

Question

[verycooldev]

<ul>
  <li></li>
  <li></li>
  <li class="hello"></li>
  <li class="hello"></li>
  <li class="hello"></li>
  <li></li>
</ul>

Как выбрать (отдельно) первый и последний тег с классом hello

Comments

[Сергей Попов]

first-of-type и last-of-type?

[verycooldev]

Сергей Попов, не работает для класса

[verycooldev]

Сергей Попов, вообще забавно, вы это у меня спрашиваете?

Answer 1

[kamlauka]

К сожалению, first-child и last-child не работают с классами. Здесь сработают только обходные методы. Знаю только как выбрать первый тег с классом, пример здесь:
https://codepen.io/kamlauka/pen/MBvzoN

Comments

[verycooldev]

Я вот чуял тут что-то неладное. Гребанный CSS. Каждый день встречаюсь с очередным его омерзением.

[kamlauka]

А что вам конкретно нужно сделать? Может есть другой способ, кроме присваивания класса? Или может можно добавить дополнительные классы на первый и последний элементы? А еще через js легко найти первый и последний класс

[verycooldev]

kamlauka, у меня элементы генерируются в цикле v-for

<ul>
        <li></li>
        <li></li>
        <li v-for="page in pages" :key="page" class="pagination-numbers"></li>
        <li></li>
        <li></li>
      </ul>

Вот их мне и надо выбрать, но не все, а первый и последний

[kamlauka]

https://codepen.io/kamlauka/pen/GBvPmL - могу предложить js

[verycooldev]

kamlauka, я понял, спс. Я стараюсь не лезть в дом подобным способом когда использую вью. В любом случае спасибо, а с CSS все ясно. Пришлось ограничить элементы тремя и буду выбирать нечетные. Так работает.

Answer 2

[Антон Плашкевич]

тык , можно так

Comments

[verycooldev]

jQ не использую. да и мало желания разносить код ради такой мелкой срани в разные места