CSS: Выберите первый смежный родственный

У меня есть список HTML, как так:CSS: Выберите первый смежный родственный

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

С Heading 1 не имеет никакого текста под ним, я хочу, чтобы скрыть это с помощью CSS.

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

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

Скрывает Heading 2 вместо 1. Заголовок

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

источник

2012-01-12 Jeremy

Используйте javascript! – greut

@greut: Если я не могу найти селектор CSS для этого, я буду использовать Javascript. – Jeremy

Джереми, я не совсем понимаю, что вы подразумеваете под «первым смежным братом». Разве вы не можете использовать ': first-child'? – BoltClock

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

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

источник

2012-01-12 00:38:41

+11

Вместо того, чтобы прибегать к JavaScript, возможно, было бы разумнее изменить структуру HTML, чтобы он * мог * быть достигнут с помощью CSS ... –

Спасибо за подробный ответ. – Jeremy

@ ŠimeVidas Я просто хочу указать, что есть ситуации, когда у вас нет контроля над HTML (например, чтение HTML прямо из базы данных - ugh ...), но у вас есть контроль над JavaScript. Но я согласен, что было бы лучше, если возможно. –

Есть несколько способов, чтобы скрыть только "Заголовок 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>. Это брат.

источник

2012-01-12 00:38:35 bookcasey

Ни один из этих решений не работал. В первом случае, возможно, я не захочу скрыть первого ребенка, если есть «Текст под заголовком 1». Второй случай не срабатывал, когда я попробовал. Кажется, CSS не поддерживает то, что я хочу делать. – Jeremy

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

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

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

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

Желаю, чтобы у меня был лучший ответ для вас. К сожалению :(

источник

2012-01-12 01:56:15

Можно предназначаться первый родственный с CSS, с некоторыми ограничениями.

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

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

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

источник

2013-02-15 10:43:20

попробуйте использовать JS для getElementsby Classname и если более чем 1 затем использовать CSS:

уль ли: первый-ребенок {дисплей: нет;}

источник

2014-10-01 02:18:47

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

источник

2015-07-06 10:12:48 FTav

CSS: Выберите первый смежный родственный

ответ

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