TransWikia.com

Обращение к элементам через псевдоклассы

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>

One Answer

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

Если Вас это не останавливает, то:

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 и ему подобные.

Справочник по CSS Селекторам

Answered by Vasily on December 19, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP