Умовне оформлення вибраних елементів у контейнері сітки

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

Я знайшов зручний спосіб відображення вибраних параметрів у сітці. Ні, це не повторне створення 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 були

Тепер відбувається оформлення прапорців, коли вони знаходяться в a :checked держава. Спочатку надамо їм колір, скажімо a 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-трюки. Ти повинен отримати інформаційний бюлетень.

• Coinsmart. Найкраща в Європі біржа біткойн та криптовалют.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. БЕЗКОШТОВНИЙ ДОСТУП.
• CryptoHawk. Альткойн Радар. Безкоштовне випробування.
• Джерело: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/