Почему не срабатывает псевдокласс :last-child?
В трех разных средах :last-child в моем примере ведет себя по-разному. В браузере на моем компьютере Кот красный, как я и ожидал, Аист - черный, хотя вроде должен быть голубой. Вот в этой песочнице https://codepen.io Кот - красный, Аист - голубой (как и должно быть по идее). А в этой https://jsfiddle.net/ и Кот, и Аист черные, т.е. на них вообще не действуют псевдоклассы.
html
<body> <span>Кот</span> <div> <span>Собака</span> <span>Бегемот</span> <i>Тигр</i> <span>Антилопа</span> </div> <span>Носорог</span> <div> <span>Жираф</span> <i>Чупакабра</i> <span>Крокодил</span> <span>Пантера</span> </div> <div> <span>Слон</span> </div> <span>Аист</span> </body> |
<body> <span>Кот</span> <div> <span>Собака</span> <span>Бегемот</span> <i>Тигр</i> <span>Антилопа</span> </div> <span>Носорог</span> <div> <span>Жираф</span> <i>Чупакабра</i> <span>Крокодил</span> <span>Пантера</span> </div> <div> <span>Слон</span> </div> <span>Аист</span> </body>
css
span:first-child { color: red; } span:last-child { color: aqua; } |
span:first-child { color: red; } span:last-child { color: aqua; }
Дополнительно:
и там и там норм отображается
Это потому, что jsfiddle подставляет свои тэги в конец кода и Аист перестаёт быть последним потомком своего родителя, им становится script.
- Вот оно что. Проверил в локальных браузерах - там тоже в конец добавляется какой-то скрипт. А это можно как-то избежать? Ведь по сути из-за такой медвежьей услуги не работает как надо.
- johnymkp, положи всё ещё в один контейнер, а не сразу в body
- johnymkp, Стандартно не должно ничего добавляться. Если сделаете отдельные html- и css-файлы и откроете страницу локально (file://) или с сервера, то браузер сам ничего не подставит.
В песочницах добавляет именно сама песочница. Можно убрать body, тогда jsfiddle сам обернёт код в div и скрипты будут после div'а. - johnymkp, оберните свой код в div, если вам важно его содержимое.
- Rsa97, На проде по-любому навешают метрик всяких и будет подставляться куча разных скриптов, фреймов и прочей ерунды, плюс браузерные расширения ставят так же, подключают скрипты, стили и скрытые блоки..
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Псевдокласс :last-child применяется к последнему потомку элемента, который является дочерним элементом его родителя. Однако, есть несколько причин, по которым может не срабатывать этот псевдокласс:
1. Неправильное понимание структуры DOM: Убедитесь, что вы правильно определили родительский элемент и его дочерние элементы. Если ваш элемент не является последним потомком своего родителя, то псевдокласс :last-child не будет применен.
2. Наличие других элементов после целевого элемента: Если после целевого элемента есть другие элементы (например, текст, комментарии и т. д.), то псевдокласс :last-child не будет считаться последним потомком и не будет применен.
3. Несоответствие стилизации: Убедитесь, что вы правильно применяете стили к элементу с помощью правильного селектора. Проверьте другие стили, которые могут перекрывать или переопределять стиль, примененный с помощью псевдокласса :last-child.
Пример использования псевдокласса :last-child для элементов с классом "example":
.example:last-child { color: red; }
Если после выполнения этих шагов проблема все еще не решена, попробуйте использовать инструменты разработчика браузера для отладки CSS и проверки применения стилей к вашему элементу.