Что такое переполнение стека?

Рассмотрим свойство order схем flex и grid.

В приведенных ниже примерах я сосредоточусь на flexbox, но те же понятия применимы к Grid.

---

С помощью flexbox можно смоделировать предыдущий селектор сиблинга.

В частности, свойство flex order может перемещать элементы вокруг экрана.

Пример:

Вы хотите, чтобы элемент A загорелся, когда элемент B зависает.

    
A
    
B

blockquote>

ШАГИ

1. Сделайте контейнер ul гибким.

   ul { display: flex; }
   

---

2. Отменить порядок братьев и сестер в надписи.

   
      
   B
      
   A
   
   

---

3. Используйте селектор для подключения к элементу A (~ или +).

   li:hover + li { background-color: red; }
   

---

4. Используйте свойство flex order, чтобы восстановить порядок братьев и сестер на визуальном дисплее.

   li:last-child { order: -1; }
   

---

... и voilà! Предыдущий родитель (или, по крайней мере, имитируемый) родился [или g28]

Вот полный код:

ul {
    display: flex;
}

li:hover + li {
    background-color: red;
}

li:last-child {
    order: -1;
}

/* non-essential decorative styles */
li {
    height: 200px;
    width: 200px;
    background-color: aqua;
    margin: 5px;
    list-style-type: none;
    cursor: pointer;
}

    
B
    
A

Из спецификации flexbox:

5.4. Порядок отображения: свойство order

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

Свойство order управляет порядком, в котором элементы гибкости появляются в контейнере flex, назначая их порядковым группам. Он принимает одно значение , которое указывает, к какой порядковой группе принадлежит элемент flex.

blockquote>

Начальное значение order для всех элементов flex равно 0.

Также см. order в спецификации CSS Grid Layout spec .

---

Примеры «предыдущих селекторов севера», созданных с использованием свойства flex order.

.container { display: flex; }

.box5 { order: 1; }    
.box5:hover + .box4 { background-color: orangered; font-size: 1.5em; }

.box6 { order: -4; }
.box7 { order: -3; }
.box8 { order: -2; }
.box9 { order: -1; }
.box9:hover ~ :not(.box12):nth-child(-1n+5) { background-color: orangered;
                                              font-size: 1.5em; }
.box12 { order: 2; }
.box12:hover ~ :nth-last-child(-1n+2) { background-color: orangered;
                                        font-size: 1.5em; }
.box21 { order: 1; }
.box21:hover ~ .box { background-color: orangered; font-size: 1.5em; }

/* non-essential decorative styles */
.container {
    padding: 5px;
    background-color: #888;
}
.box {
    height: 50px;
    width: 75px;
    margin: 5px;
    background-color: lightgreen;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

Using the flex order property to construct a previous sibling selector



    
1
    
2
    
3
    
HOVER ME
    
4






    
HOVER ME
    
HOVER ME
    
6
    
7
    
8
    
10
    
11






    
HOVER ME
    
13
    
14
    
15
    
16
    
17
    
18
    
19
    
20

jsFiddle

---

A Side Note & ndash; Две устаревшие убеждения о CSS

Flexbox разрушает давние убеждения в отношении CSS.

Одно из таких убеждений заключается в том, что предыдущий селектор сиблинга невозможен в CSS .

Сказать, что это убеждение широко распространено, было бы преуменьшением. Ниже приведена выборка связанных вопросов только для переполнения стека:

• Выберите предыдущий родственный элемент в CSS с помощью селекторов
• CSS : выберите предыдущий sibling
• CSS выберите предыдущий sibling
• Предыдущий смежный селектор в CSS
• Выберите предыдущие братья и сестры при наведении
• Селектор CSS для перехода к предыдущему брату
• Измените цвет элементов брата на hover using CSS
• Как выбрать предыдущего брата с использованием синтаксиса selenium css
• Селектор CSS для выбора элемента, который приходит до еще один элемент?
• Как добавить стиль в предыдущий родной файл активного входа, используя только CSS
• Селектор CSS для следующих и предыдущих элементов
• Как воздействовать на другие элементы при зависании div

Как описано выше, это убеждение не совсем верно. Предыдущий сингл-селектор может быть смоделирован в CSS с использованием свойства flex order.

Миф z-index

Еще одно давнее убеждение что z-index работает только с расположенными элементами.

Фактически, самая последняя версия spec & ndash; Проект редактора W3C & ndash; все еще утверждает, что это правда:

9.9.1 Определение уровня стека: свойство z-index

z-index

• Значение: auto | | inherit
• Начальное: auto
• Применяется к: позиционированным элементам
• Inherited: no
• Процент: N / A
• Медиа: визуальный
• Вычисленное значение: как указано

(выделено курсивом)

blockquote>

В действительности, однако, эта информация устарела и неточна.

Элементы, которые являются элементами гибких элементов или , могут создавать (f28) static.

4.3. Элемент Flex Item Z-Ordering

Элементы Flex представляют собой то же самое, что и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и значения z-index, отличные от auto создать контекст стекирования, даже если position - static.

5.4. Z-axis Ordering: свойство z-index

Порядок рисования элементов сетки точно такой же, как и встроенные блоки, за исключением того, что порядок ортогонального заказа используется вместо необработанного порядка документа и z-index, отличные от auto, создают контекст стекирования, даже если position - static.

blockquote>

Ниже приведена демонстрация работы z-index над непозиционированными элементами гибкости: https://jsfiddle.net/m0wddwxs/