CSS: Выбрать все элементы первого поколения (детей), но не внуки

Учитывая этот неупорядоченный список:CSS: Выбрать все элементы первого поколения (детей), но не внуки

<ul> 
    <li>Level One Item One 
    <ul> 
     <li>Level One Item One</li> 
     <li>Level One Item Two</li> 
    </ul> 
    </li> 
    <li>Level One Item Two 
    <ul> 
     <li>Level Two Item One</li> 
     <li>Level Two Item Two</li> 
    </ul> 
    </li> 
</ul>

... Я хотел бы применить стиль для всех непосредственных <li> детей с <ul>, не имея этот стиль применяется к вложенным элементам списка.

Я думал, что этот селектор CSS будет делать трюк, но это не имеет никакого эффекта:

ul>li:not(li>ul>li) { 
    border: 1px solid red; 
}

Вот скрипка:

Шутит, вот скрипка: https://jsfiddle.net/nz5fdnd0/1/

Вот изображение желаемого результата:

Желаемое решение позволит избежать использования явных атрибутов класса или идентификатора в HTML.

источник

2016-11-18 mysmallidea

Вы можете использовать

:not(li) > ul > li { 
    border: 1px solid red; 
}

, что означает цель li в ul, который не содержится (непосредственно) в li.

Так что имейте в виду, что если внутри li вы добавляете div и в этом ul li, он будет оформлен в стиле.

:not(li) > ul > li { 
 
    border: 1px solid red; 
 
}

<ul> 
 
    <li>Level One Item One 
 
    <ul> 
 
     <li>Level One Item One</li> 
 
     <li>Level One Item Two</li> 
 
    </ul> 
 
    </li> 
 
    <li>Level One Item Two 
 
    <ul> 
 
     <li>Level Two Item One</li> 
 
     <li>Level Two Item Two</li> 
 
    </ul> 
 
    </li> 
 
</ul>

источник

2016-11-18 02:04:18

Одно решение, которое я нашел, чтобы добавить внешнюю <div>, а затем цель первого ребенка, что:

div > ul > li { 
 
    border: 1px solid red; 
 
}

<div> 
 
    <ul> 
 
    <li>Level One Item One 
 
     <ul> 
 
     <li>Level One Item One</li> 
 
     <li>Level One Item Two</li> 
 
     </ul> 
 
    </li> 
 
    <li>Level One Item Two 
 
     <ul> 
 
     <li>Level Two Item One</li> 
 
     <li>Level Two Item Two</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

К сожалению, он не использует какие-либо фантазии: не селекторы, ах хорошо такая жизнь.

источник

2016-11-18 01:44:36 mysmallidea

Вы также можете поместить класс на 'ul' вы хотите предназначаться и сделать' ул.myclass> li' –

Несмотря на то, что _ «Желаемое решение позволило бы избежать использования явных атрибутов класса или идентификатора в HTML» _ Я бы пошел с классом, а не вводил закрывающий 'div' только для целей стиля. Однако, если внешняя 'ul' является _already_ (всегда) в div ... –

Да, это было бы проще, но источник генерируется из Markdown, поэтому трудно добавить класс. Добавление контейнера div тривиально, поэтому я пойду с этим. – mysmallidea

-1

ul li { 
    border: 1px solid red; 
} 
ul:first-child ul li{ 
    border: none; 
}

источник

2016-11-18 01:52:03 oleeeee

Нет, что не возвращает никаких элементов. Хорошая попытка, хотя. – mysmallidea

Извините за это, я думал, что это то, что вы ищете :) – oleeeee

После вашего редактирования это действительно работает, так что это может быть ответ. – mysmallidea

Вы также можете использовать

ul:not(:only-child) > li { 
    border: 1px solid red; 
}

Это будет работать, если ваш родитель <ul> элемент имеет братьев и сестер.

ul:not(:only-child) > li { 
 
    border: 1px solid red; 
 
}

<ul> 
 
    <li>Level One Item One 
 
    <ul> 
 
     <li>Level One Item One</li> 
 
     <li>Level One Item Two</li> 
 
    </ul> 
 
    </li> 
 
    <li>Level One Item Two 
 
    <ul> 
 
     <li>Level Two Item One</li> 
 
     <li>Level Two Item Two</li> 
 
    </ul> 
 
    </li> 
 
</ul>

источник

2016-11-18 02:17:26 Ricky

CSS: Выбрать все элементы первого поколения (детей), но не внуки

ответ

Смежные вопросы