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

Ответ 1

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

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

Ответ 2

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

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

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

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

Ответ 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>. Это брат.

Ответ 4

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

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

Если вы столкнулись с чем-то, отправьте его здесь.

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

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

Ответ 5

попробуйте использовать js для getElementsby Classname и если больше 1, используйте css:

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

Ответ 6

Я знаю, что этот вопрос уже имеет действительный выделенный ответ, но, возможно, другие люди хотят использовать мое решение только для 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

И вот шаблон angular для нескольких предупреждений.

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

Ответ 7

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

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