1

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

1 ответ 1

0

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

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

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

3
  • Спасибо за подробный ответ) Такая запись через прямых потомков что-то ломает, например, перестаёт работать flex на элементах списка. "упростить селекторы типа section > ul > ul > ul используя псевдоклассы такие как :nth-of-type и ему подобные." -- буду благодарна, если приведете пример) 23 июл 2020 в 21:52
  • Именно об этом я и написал вначале. CSS это каскад, если Вы хотите переписать уже существующий код и отказаться от классов то Вам придется заново проверить правильно ли происходит наследование.
    – Vasily
    23 июл 2020 в 21:57
  • без классов и/или других атрибутов у элементов, относительно вашего примера, этого сделать неполучиться имею в виду, какому элементу вы бы присвоили класс и какой nth-child указывали бы? не могу сообразить, как адекватнее это сделать 23 июл 2020 в 23:09

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.