Стиль последних детей последнего ребенка

Question

Стиль последних детей последнего ребенка

0

У меня есть следующий HTML:

<section></section>

<section id="top">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>   <!-- STYLE THIS -->
        <li>5</li>   <!-- STYLE THIS -->
    </ul>
</section>

<section></section>

У меня динамически сгенерированный HTML, как мне стилизовать две вышеуказанные вещи? Примените стиль к section с id="top" и создайте последние 2 list-items в последней ul.

Josh Crozier 23 сен. 2013, в 19:48

Источник

Теги:

javascript

html

css

css3

css-selectors

3 ответа

2

Как насчет:

#top > ul:nth-child(3) > li:nth-child(4),
#top > ul:nth-child(3) > li:nth-child(5) {}

Рабочая демонстрация

letiagoalves 23 сен. 2013, в 14:24

0

идеальное спасибо за помощь
user2701913 23 сен. 2013, в 17:28

1

#top {
    color:red;
}

#top ul:last-of-type li:last-of-type {
    color:green;
}

juanvan 23 сен. 2013, в 15:41

0

это не работает
user2701913 23 сен. 2013, в 17:27

Ещё вопросы

Josh Crozier · Accepted Answer · 2013-09-23T15-41-00.000Z

Что-то вроде этого?

#top > ul:last-of-type li:nth-last-child(-n+2) {
    background:aqua;
}

jsFiddle здесь

Используйте комбинацию селекторов - :last-of-type и :nth-last-child.

Примечание. Это не полностью поддерживается IE8 и ниже.

Следует отметить, что они используют селекторы css3, которые недоступны в IE ниже 9.
@PatrickEvans Работаем над добавлением этого сейчас, спасибо
спасибо, мне нравится их сочетание