Stack Overflow на русском Asked by Elena Zinovyeva on December 19, 2021
Элементов родительского списка может быть бесконечное множество. Моя задача сделать код универсальным, убрав из html классы и обратиться к элементам через псевдоклассы CSS.
Я добралась до всех, кроме списка .inner
и его элементов.
Как обратиться только через псевдоклассы к:
.inner
.inner li
.inner li:first-child
.inner li:last-child
HTML:
<section class="list">
<ul>
<li>
<ul>
<li>
<ul class="inner">
<li>Адрес</li>
<li>Телефон</li>
</ul>
</li>
</ul>
</li>
<li>
<ul>
<li>
<ul class="inner">
<li>Адрес</li>
<li>Телефон</li>
</ul>
</li>
</ul>
</li>
Считаю нужным предупредить что использование длинных и сложных селекторов это плохая практика, а поддерживать такой код будет крайне сложно.
Если Вас это не останавливает, то:
section > ul > ul > ul {
// .inner
}
section > ul > ul > ul li {
// .inner li (все, включая вложенные)
}
section > ul > ul > ul > li {
// .inner li (только прямые наследники)
}
section > ul > ul > ul li:first-child {
// .inner li:first-child
}
section > ul > ul > ul li:last-child {
// .inner li:last-child
}
Без классов или других аттрибутов у элементов Вам не к чему будет "привязаться", а следовательно и не будет возможности как то упростить селекторы типа section > ul > ul > ul
используя псевдоклассы такие как :nth-of-type и ему подобные.
Answered by Vasily on December 19, 2021
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP