CSS-селектор в первую очередь детей, а не братьев и сестер - PullRequest
1 голос
/ 22 мая 2019

Как выбрать только первый экземпляр элемента без запуска селектора для каких-либо дочерних элементов?Дети, как у потомков, а не братьев и сестер.

В примере ul:first-of-type выберет первый неупорядоченный список, хотя любые подменю (ul ul, ul li ul и ul ul ul ul ul) будут также выбран.Я только хочу выбрать первый экземпляр ul элемента в #menu.

I мог бы сделать следующее, хотя это бессмысленно запутанно.

#menu ul:not(ul ul):not(ul ul ul):not(ul ul ul ul) {property: value;}

Нет, я тоже не могу сделать #menu > ul, так как количество элементов от #menu до ul варьируется.

<nav id="menu">/* display: flex; justify-content: space-between; */
<div>
<ul>/* Primary, select THIS ul (no > in selector!) */
 <li>Menu</li>
 <li>Menu</li>
 <li>Menu
 <ul>/* Secondary menu. */
 <li>Menu</li>
 <li>Menu
  <ul>/* Tertiary menu. */
  <li>Menu</li>
  <li>Menu</li>
  <li>Menu</li>
  </ul>
 </li>
 <li>Menu</li>
 </ul> 
 </li>
 <li>Menu</li>
</ul>
</div>
<div>
/* Auxiliary menu items on right side of menu bar, may contain ul (do not select these either). */
</div>
</nav>

1 Ответ

0 голосов
/ 22 мая 2019

По крайней мере, на момент написания этого поста и прохождения некоторых обширных списков селекторов, по крайней мере появляется , что все селекторы type основаны на братьях и сестрах, а не на потомках. Таким образом, чтобы первый элемент ul в меню имел height: 100% без воздействия на вторичные и третичные элементы ul, я добавил второй селектор.

#menu ul, #menu ul > li, #menu ul > li > a {align-items: center; display: flex; height: 100%;}
#menu ul ul {height: initial;}

Это частично позволяет мне иметь выпадающие меню всегда по центру по горизонтали под основными меню в сочетании с переменными CSS для общей высоты основного заголовка (в котором меню является потомком).

Поскольку я работаю на платформе, я могу , а не добавлять классы CSS по своему усмотрению, поэтому я должен использовать доступные селекторы.

Надеемся, что в будущем селекторы CSS будут расширяться и включать селекторы-потомки в дополнение к селекторам одного уровня.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...