CSS: выберите первый соседний брат

Question

У меня есть такой HTML-список:

<ul>
  <li class="heading">Heading 1</li>
  <li class="heading">Heading 2</li>
  <li>Text Under Heading 2</li>
</ul>

Поскольку в заголовке 1 нет текста, я хочу скрыть его с помощью CSS.

Если я сделаю это,

li.heading + li.heading { display: none; }

скрывает заголовок 2 вместо заголовка 1.

Как скрыть заголовок 1?Есть ли способ найти соседних братьев и сестер и выбрать первого?

Answer 1

Можно настроить таргетинг на первого брата с помощью CSS, с некоторыми ограничениями.

Для примера в вопросе это можно сделать с помощью чего-то подобного

li.heading { display: none; }                   /* apply to all elements */
li.heading + li.heading { display: list-item }  /* override for all but first sibling */

Это работает, но требует, чтобы вы могли явно установить стили для братьев и сестер, чтобы переопределить настройку для первого дочернего элемента.

Answer 2

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

Требуемый эффект может быть достигнут с использованием JavaScript довольно простым способом, и вы можете решить,в зависимости от цели, удаляете ли вы элементы из отображения или полностью удаляете их из дерева документа.

Answer 3

Есть несколько способов скрыть только «Заголовок 1»:

ul li:first-child {display:none;}

В качестве альтернативы:

li.parent{ display: none; }
li.parent + li.parent { display: list-item; }

Также, <li>Child of Heading 2</li> - это не ребенок <li class="parent">Heading 2</li>.Это брат.

Answer 4

Использование :first-of-type

Вы можете прочитать больше здесь

Answer 5

Я знаю, что на этот вопрос уже есть правильный помеченный ответ, но, возможно, другие люди захотят использовать мое решение только для css:

Я хотел, чтобы в контейнере был список предупреждений (в данном случае предупреждений о начальной загрузке), а их граница свернулась. Каждое предупреждение имеет радиус границы, который выглядит довольно глупо, когда все они находятся в одном контейнере. Итак, с помощью margin-top: -1px я сделал их границы разрушенными. В качестве следующего шага я должен был изменить стили первого, каждого предупреждения между последним и последним. И это также должно выглядеть хорошо для одного предупреждения, двух предупреждений и n предупреждений.

.alert {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    margin: 0;
}

// set for the first alert that it should have a rounded top border

.alert:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

// set for the last alert that it should have a rounded bottom border
// if there is only one alert this will also trigger it to have a rounded bottom border aswell

.alert+.alert:last-child {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

//for the last border of n alerts we set the top border to be collapsing and remove only the the top rounded borders

.alert+.alert:not(:last-child) {
  margin-top: -1px;
  border-radius: 0;
}

// for each following alert in between we remove the top rounded borders and make their borders collapse

А вот угловой шаблон для нескольких оповещений.

<div id="alertscontainer">
    <div data-ng-repeat="alert in data.alerts" class="alert" data-ng-class="'alert-' + alert.class">
        {{alert.body}}
    </div>
</div>

Answer 6

попробуйте использовать js для получения имени класса ClassElementsby и, если их больше 1, используйте css:

ul li: first-child {display: none;}

Answer 7

Официальная спецификация CSS3 в настоящее время не поддерживает ничего подобного, хотя я понимаю, что это было бы полезно.

Я бы попытался выполнить поиск некоторых готовых сценариев / библиотек javascript или jquery для добавления селекторов css. Хотя я никогда ничего не встречал.

Если вы что-то натолкнулись, пожалуйста, опубликуйте это здесь.

Если вы ничего не нашли, вы можете просто сделать это вручную или попытаться найти совершенно другое решение.

Хотел бы я иметь лучший ответ для вас. Извините: (