Условное оформление выбранных элементов в контейнере сетки

Календари, корзины покупок, галереи, проводники файлов и онлайн-библиотеки — это некоторые ситуации, когда выбираемые элементы отображаются в виде сеток (т. е. квадратных решеток). Вы знаете, даже те проверки безопасности, которые просят вас выбрать все изображения с пешеходными переходами или что-то в этом роде.

Я нашел удобный способ отображать выбираемые параметры в сетке. Нет, не воссоздание этой reCAPTCHA, а просто возможность выбора нескольких элементов. А когда выбраны два или более смежных элемента, мы можем использовать хитрое :nth-of-type комбинаторы, псевдоэлементы и :checked псевдокласс, чтобы стилизовать их таким образом, чтобы они выглядели сгруппированными.

Сама идея комбинаторов и псевдофлажков для получения закругленных флажков пришла из предыдущую статью я написал. Это был простой одноколоночный дизайн:

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

Прежде чем мы начнем…

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

Кроме того, я использую CSS Grid для макета. Я бы порекомендовал то же самое, но, конечно, это только личные предпочтения, и ваш пробег может отличаться. Для меня использование сетки позволяет мне легко использовать одноуровневые селекторы для таргетинга элемента. ::before и ::after псевдонимы.

Следовательно, какой бы стандарт макета вы ни использовали в своем приложении, убедитесь, что псевдообъекты по-прежнему доступны в CSS, и убедитесь, что макет остается неизменным в разных браузерах и на разных экранах.

Давай начнем сейчас

Как вы, возможно, заметили в предыдущей демонстрации, установка и снятие флажка с элемента-флажка изменяет дизайн полей в зависимости от состояния выбора других флажков вокруг него. Это возможно, потому что я применил стиль к каждому блоку, используя псевдоэлементы соседних элементов, а не его собственный элемент.

На следующем рисунке показано, как ::before псевдоэлементы ящиков в каждом обзор (кроме первого столбца) перекрывают поля слева от них, и как ::after псевдоэлементы ящиков в каждом строка (кроме первого ряда) перекрывают поля выше.

Вот базовый код

Разметка довольно проста:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

В начальном CSS происходит немного больше. Но, во-первых, сама сетка:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

Это сетка из пяти строк и четырех столбцов, содержащих флажки. Я решил стереть внешний вид флажков по умолчанию, а затем придать им собственный светло-серый фон и очень закругленные границы:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Обратите также внимание, что сами флажки представляют собой сетки. Это ключ к размещению их ::before и ::after псевдоэлементы. Кстати говоря, давайте сделаем это сейчас:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Мы выбираем только псевдоэлементы флажков, которые не находятся в первом столбце или первой строке сетки. input:not(:nth-of-type(4n+1)) начинается с первого флажка, затем выбирает ::before каждого четвертого предмета оттуда. Но заметьте, мы говорим :not(), так что на самом деле то, что мы делаем, это пропуска домен ::before псевдоэлемент каждого четвертого флажка, начиная с первого. Затем мы применяем стили к ::after псевдо каждого флажка, начиная с пятого.

Теперь мы можем стилизовать как ::before и ::after псевдос для каждого флажка, который не находится в первой колонке или строке сетки, чтобы они были перемещены влево или вверх соответственно, скрывая их по умолчанию.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

Стилизация :checked состояние

Теперь идет стилизация флажков, когда они находятся в :checked государство. Во-первых, давайте зададим им цвет, скажем, limegreen задний план:

input:checked { background: limegreen; }

Флажок должен иметь возможность изменять стиль всех соседних флажков. Другими словами, если мы установим одиннадцатый флажок в сетке, мы также сможем стилизовать поля, окружающие его сверху, снизу, слева и справа.

Это делается путем нацеливания на правильные псевдоэлементы. Как мы это делаем? Ну, это зависит от фактического количества столбцов в сетке. Вот CSS, если два соседних поля отмечены в сетке 5⨉4:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

Если вы предпочитаете, вы можете сгенерировать приведенный выше код динамически. Однако в типичной сетке, скажем, в галерее изображений, количество столбцов будет небольшим и, вероятно, будет фиксированным количеством элементов, тогда как количество строк может продолжать увеличиваться. Особенно, если он предназначен для мобильных экранов. Вот почему этот подход по-прежнему остается эффективным. Если по какой-то причине ваше приложение имеет ограниченные строки и расширяющиеся столбцы, рассмотрите возможность поворота сетки вбок, потому что с потоком элементов CSS Grid упорядочивает их слева направо и сверху вниз (т.е. строка за строкой). .

Нам также нужно добавить стили для последних флажков в сетке — они не все покрыты псевдоэлементами, поскольку они являются последними элементами на каждой оси.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

Это какие-то хитрые селекторы! Первый…

input:nth-of-type(4n-1):checked + input:checked

… в основном говорит следующее:

Проверено <input> элемент рядом с отмеченным <input> в предпоследнем столбце.

И nth-of-type рассчитывается так:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

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

И эта строка:

input:nth-of-type(4n):checked + * + * + * + input:checked

Говорит это:

An <input> элемент при условии, что он отмечен, непосредственно примыкает к элементу, который непосредственно примыкает к другому элементу, который также непосредственно примыкает к другому элементу, который, в свою очередь, непосредственно примыкает к <input> элемент, находящийся в проверенном состоянии.

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

Использование его

Мы только что рассмотрели общий принцип и логику дизайна. Опять же, насколько это полезно в вашем приложении, будет зависеть от дизайна сетки.

Я использовал закругленные границы, но вы можете попробовать другие формы или даже поэкспериментировать с фоновыми эффектами (Temani прикрывает вас идеями). Теперь, когда вы знаете, как работает формула, все остальное зависит только от вашего воображения.

Вот пример того, как это может выглядеть в простом календаре:

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

---

Это обертка! Довольно аккуратно, правда? Я имею в виду, что нет ничего «нового» в том, что происходит. Но это хороший пример выбор вещей в CSS. Если мы овладеем более продвинутыми методами выбора, в которых используются комбинаторы и псевдоэлементы, то наши возможности по стилизации могут выйти далеко за рамки стилизации одного элемента — как мы видели, мы можем условно стилизовать элементы на основе состояния другого элемента.

---

Условное оформление выбранных элементов в контейнере сетки первоначально опубликовано CSS-хитрости, Вам следует получить информационный бюллетень.

• Коинсмарт. Лучшая в Европе биржа биткойнов и криптовалют.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. БЕСПЛАТНЫЙ ДОСТУП.
• КриптоХок. Альткоин Радар. Бесплатная пробная версия.
• Источник: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/