Как использовать селектор CSS для стиля только последней строки?

0

У меня есть сетка в моем магазине, которая имеет 3 продукта в каждой строке. Количество строк и количество продуктов в последней строке неизвестно, это может быть один-три. Мне нужен селектор css для таргетинга на последнюю строку, есть ли один продукт или три. Html выглядит так:

 <ul>
     <li>Row One</li>
     <li>Row One</li>
     <li>Row One</li>
     <li>Row Two</li>
     <li>Row Two</li>
     <li>Row Two</li>
     <!-- Last row, could be on, two or three products-->
     <li>Row Three</li>
     <li>Row Three</li>
     <li>Row Three</li>
 </ul>

Я пробовал использовать:

ul li:last-child + li

но это явно не работает.

Это возможно? вот демонстрационный пример с возможными сценариями: http://codepen.io/anon/pen/Jkqry/

Спасибо.

  • 0
    ul li:last-child ? Вы хотите последнюю строку или последнюю строку для группы текстовых элементов?
  • 0
    В первом и втором ряду всегда 3 элемента или меньше?
Показать ещё 1 комментарий
Теги:

5 ответов

0

В качестве альтернативы, вы не можете поместить li вы хотите (последний или что-то еще) класс, а затем написать css для этого класса?

Поделиться
0

Я думаю, вы ищете это:

ul li:nth-child(6) ~ li{
    color: red;
}

Работает, если вы знаете, сколько строк есть.

Рабочий скрипт

Поделиться
0

ОБНОВИТЬ:

если бы я правильно понял ваш вопрос:

Это должно быть то, что вы после

ul{
    display:inline-block;
    float: left;
    list-style: none;
}
ul:last-child{
    color: #ff0000;
}

и html:

<ul>Row 1:
    <li>Row One</li>
    <li>Row One</li>
    <li>Row One</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <! -- Last row -->
    <li>Row Three</li>
    <li>Row Three</li>
    <li>Row Three</li>
</ul>

<ul>Row 2:
    <li>Row One</li>
    <li>Row One</li>
    <li>Row One</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <! -- Last row -->
    <li>Row Three</li>
    <li>Row Three</li>
</ul>

<ul>Row 3:
    <li>Row One</li>
    <li>Row One</li>
    <li>Row One</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <li>Row Two</li>
    <! -- Last row -->
    <li>Row Three</li>
</ul>

Смотрите эту скрипку, пожалуйста: http://fiddle.jshell.net/HYyxb/

Поделиться
0

Вы используете последний дочерний селектор.

li:last-child
{
your css here....
}
Поделиться
  • 0
    нет, это не работает, мне нужен последний ряд. там может быть до трех элементов, которые мне нужно нацелить. это предназначается только для последнего элемента.
  • 1
    То, что вы говорите, невозможно с css. Вы должны динамически делать это с помощью jquery.
Показать ещё 1 комментарий
-1

Вы можете использовать селектор last-of-type: li:last-of-type Он должен работать;)

Поделиться
  • 0
    нет, это не работает, мне нужен последний ряд. там может быть до трех элементов, которые мне нужно нацелить. это предназначается только для последнего элемента.
  • 0
    хорошо, тогда используйте li: nth-last-child (-n + 3)
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню