У меня есть следующий 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
.
Что-то вроде этого?
#top > ul:last-of-type li:nth-last-child(-n+2) {
background:aqua;
}
Используйте комбинацию селекторов - :last-of-type
и :nth-last-child
.
Примечание. Это не полностью поддерживается IE8 и ниже.
Как насчет:
#top > ul:nth-child(3) > li:nth-child(4),
#top > ul:nth-child(3) > li:nth-child(5) {}
#top {
color:red;
}
#top ul:last-of-type li:last-of-type {
color:green;
}