CSS для стилизации последнего ребенка в списке
У меня есть список, сгенерированный php из таблицы sql, я пытаюсь добавить некоторые CSS в последний <li> но это влияет на все <li>«S.
Есть что-то, чего я не понимаю, или это что-то конкретное в моем коде?
PHP:
echo "<ul>";
if($row['sender'] == $userid) {
echo "<li class='bubble' style='background: #4cd964;'><p>" . $text . "</p></li>";
} else {
echo "<li class='bubble' style='background: #ffcc00;'><p>" . $text . "</p></li>";
}
echo "</ul>";
CSS:
.bubble {
position: relative;
margin-bottom: 50px;
left: 45%;
width:100px;
height:100px;
border-radius:50%;
}
.bubble:last-child {
margin-bottom: 20%;
}
Решение
Ваш PHP-код выводит только одну строку, один LI с либо # 4cd964, либо # ffcc00 в качестве цвета фона. Я не вижу какой-либо итерационной структуры для вывода большего количества строк. Если ваша итерация за пределами <UL>...</UL> блок, то вы выводите столько списков, сколько есть итераций … это означает, что: last-child применяется к каждому LI на вашей странице.
Пожалуйста, отправьте полный код PHP.
Другие решения
Попробуйте это с вашим:
HTML
<ul>
<li class="bubble">child 1</li>
<li class="bubble">child 1</li>
<li class="bubble">child 1</li>
<li class="bubble">last child</li>
</ul>
CSS:
li.bubble:last-child{
color: red
}
Результат
Это должно работать:
li.bubble:last-child{
color: red
}
Если он не пытается:
li.bubble:last-child p{
color: red
}
И это должно означать, что ваш <p> имеет определенный цвет где-то еще в вашем CSS, который имеет более высокое значение специфичности.