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

Question

Элементов родительского списка может быть бесконечное множество. Моя задача сделать код универсальным, убрав из 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>

Answer 1

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

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

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 Селекторам

БЛОГ НА HUSL

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

Ответы (1 шт):