Может ли элемент html быть пропущен css?
TL;DR:
Может ли css игнорировать элемент html, но не его дочерние элементы? Такой элемент будет обрабатываться css так, как будто его там нет; но его дочерние элементы будут рассматриваться как обычные, т. е. как дочерние элементы родителя игнорируемого элемента.
Детали, Мотивация:
Допустим, у нас есть хороший стилизованный макет, например. с display: flex.
<div className = "outer"><!-- this one has display: flex (just example) -->
<div className = "inner">Foo</div>
<div className = "inner">Bar</div>
<div className = "inner">Baz</div>
<div className = "inner">Foo 2</div>
<div className = "inner">Bar 2</div>
<div className = "inner">Baz 2</div>
</div>
Но затем нам нужно обернуть одну группу наших элементов inner в form или nav (по семантическим или другим причинам):
<div className = "outer">
<div className = "inner">Foo</div>
<div className = "inner">Bar</div>
<div className = "inner">Baz</div>
<form>
<div className = "inner">Foo 2</div>
<div className = "inner">Bar 2</div>
<div className = "inner">Baz 2</div>
</form>
</div>
Ну, конечно, это нарушает наш желаемый макет (например, flex), потому что <form> стал дочерним элементом outer и братом первых трех inner.
Можно ли сделать так, чтобы элемент, в данном случае form, игнорировался css, как если бы его не было в дереве элементов html?
Если это невозможно, рассматривалась ли когда-либо эта функция, работала ли она, отклонялась ли она...?
@connexo Круто. Что ж, было бы действительно неплохо иметь хотя бы специальное решение для flex. Но я ищу более общий «пропуск CSS». Я не вижу теоретической причины, почему этого не может быть. Так что мне интересно, это вещь?
Ответы 2
просто установите форму на display: flex
теперь форма является прямым дочерним элементом... поэтому вы можете, например, установить ее на flex:1 или около того.
и вы получите нового «родителя» для дочерних элементов формы.
Это именно то, для чего предназначен display:contents. Так:
form { display:contents }
.outer {
display: flex;
justify-content: space-evenly;
}
form {
display: contents;
}<div class = "outer">
<div class = "inner">Foo</div>
<div class = "inner">Bar</div>
<div class = "inner">Baz</div>
<form>
<div class = "inner">Foo 2</div>
<div class = "inner">Bar 2</div>
<div class = "inner">Baz 2</div>
</form>
</div>Имейте в виду, что в настоящее время в браузерах есть ошибка, которая делает наш элемент form недоступным для программ чтения с экрана. Это проблематично для семантических/логических элементов из точки зрения доступности. Надеюсь, это будет исправлено в будущем.
Это возможно с помощью подсетки CSS. Однако не похоже, что что-то подобное существует для flex.