Выберите CSS программно
Мне нужно определить правила CSS для элементов HTML, размещенных на одном уровне, без возможности манипулировать html. В частности, необходимо использовать элементы li с классами, которые содержат строку «section_break» для разграничения групп. Я не знаю заранее количество разделов и количество элементов li в каждом разделе.
Например;
<fieldset class = "multistep-fieldset">
<li class = "section_break"></li>
<li class = "background_color field-size-large"></li>
<li class = "background_image field-size-large"></li>
<li class = "section_break_1"></li>
<li class = "main_image field-size-large"></li>
<li class = "section_break_2"></li>
<li class = "main_image field-size-large"></li>
<li class = "main_image field-size-large"></li>
</fieldset>
Мне нужно сгруппировать правила css от section_break до section_break_1, затем от section_break_1 до section_break_2 и так далее. В примере первые 3 элемента li (включая li с классом section_break) являются частью первого раздела, следующие 2 элемента li являются частью второго раздела, последние 3 элемента li являются частью третьего раздела. Мне нужно нарисовать границы, которые покрывают каждую из них отдельно.
Есть ли простой способ сделать это, используя только CSS?
Более близкий ответ выглядит так; Выбор CSS для случайного количества элементов Спасибо @m.piras за это решение. Но все еще нужно добавить границу к нижней части ящиков до последнего.
P.S. К сожалению, я не могу манипулировать HTML-элементами, потому что они генерируются автоматически с помощью кода. Я также не знаю заранее, сколько секций и элементов в каждой секции у меня получится.
КОДЕПЕН
@Terry К сожалению, я не могу манипулировать элементами HTML, потому что они генерируются автоматически с помощью кода.
Ответы 1
Попробуйте использовать селектор n-го типа. Например:
li:nth-of-type(1) {
border-top: 1px solid red;
}
поместит границу поверх первого элемента li
РЕДАКТИРОВАТЬ
Если вы не знаете, сколько элементов section_break будет на вашей странице, вы можете добавить комбинацию селекторов атрибутов и комбинатора смежных элементов , как показано ниже ( codepen):
li[class* = "section_break"]{
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 0px solid black;
}
li[class* = "section_break"] ~ :not(li[class* = "section_break"]) {
border-top: 0px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 0px solid black;
}
li[class* = "section_break"] ~ :last-of-type:not(li[class* = "section_break"]) {
border-top: 0px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
li[class* = "section_break"] ~
:not(li[class* = "section_break"]):has(+ li[class* = "section_break"]){
border-bottom: 1px solid black;
}
Первый блок выбирает каждый li, который содержит строку section_break в своем атрибуте класса; второй блок выбирает соседние с ними li, у которых нет section_break в их атрибуте класса; третий блок выбирает последнюю итерацию соседнего li, у которого нет section_break в их атрибуте класса; последний блок добавляет границу к последнему из каждой группы на основе следующего брата, имеющего section_break в своем классе.
Ты прав. Я могу сделать это с помощью nth-of-type или комбинации с first-of-type и last-of-type. ссылка Но, подумайте так; если мы не знаем, сколько li генерируется кодом, и если мы можем выбрать их только с помощью класса section_break, section_break_1, section_break_2 и т. д. Возможно, для этого нам понадобится какой-нибудь js. Но мне любопытно, есть ли другой способ решить эту проблему с помощью CSS. Может быть, используя переменные в CSS или что-то в этом роде.
Я отредактировал решение. Я думаю, вы сможете получить то, что ищете, добавив селекторы атрибутов и смежные комбинаторы братьев и сестер.
Спасибо за ваш ответ. Я отредактировал пин Codepen: выберите случайное количество элементов. Не мог бы ты взглянуть на это? Как я могу добавить нижнюю границу к полям до последнего?
Конечно, я отредактировал ответ, добавив последний блок, который делает то, что вы просите.
Прохладный. Я многому научился на этой быстрой сессии вопросов и ответов. Спасибо 🙏🏻 большое m.piras. Поддерживать связь! ✌🏻
Это похоже на проблему XY: похоже, что вашу разметку необходимо обновить, чтобы она отражала предполагаемую группировку/организацию/иерархию, например. вложенные элементы списка. Например, почему
<li>используется в качестве декоративного элемента для разрыва раздела? Это не то, что CSS должен делать за вас.