Шаблон та деталі CSS-селекторів

Che шпаргалка селекторів CSS

Нещодавно я занурився в селектори CSS.

Стільки CSS-селекторів з незнайомими символами,>. , * + ~ [] тощо, тому мене часто плутають, як працюють селектори CSS. Врешті-решт я випрямив їх у голові і переробив їх, як я розумію.

* Насправді я б хотів організувати їх на одній сторінці формату А4, щоб зберегти папери та врятувати Землю, але я не зміг, тому що так багато вибраних я хотів додати, тому мені довелося перейти більше ніж одну сторінку . Це всі чотири сторінки формату А4, крім титульних аркушів.

Роздрукуйте цю шпаргалку і приклейте її до стіни. Не запам’ятовуйте їх, просто підглядайте. Я сподіваюся, що ця інфографіка допоможе вам швидко знайти належні селектори CSS та заощадить ваш час.

Шаблон CSS-селекторівГра для селекторів CSS від Райана Ю

Перейдіть, щоб завантажити шпалери для вибору CSS та насолоджуйтесь грою🕹

Не хвилюйтесь. Це все безкоштовно.

Зануріться у селектор CSS.

Я перерахую інфографіку разом з визначеннями MDN, щоб полегшити вам справи.

Селектор типу

Селектор типу CSS відповідає елементам за назвою вузла. Іншими словами, він вибирає всі елементи заданого типу в документі. - МДН

Селектор типу

Селектор ідентифікаторів

Вибирає елемент на основі значення його атрибута id. У документі має бути лише один елемент із заданим ідентифікатором. - МДН

Селектор ідентифікаторів

Селектор нащадків

Будь-який елемент, що відповідає B, є нащадком елемента, що відповідає A (тобто дитина або дитина дитини тощо). комбінатор - це один або кілька просторів або подвійний більший за знаки. - МДН

Селектор нащадків

Поєднайте селектори і набір ID

Поєднайте селектори і набір ID

Вибір класу

Селектор класів CSS відповідає елементам на основі вмісту атрибута класу. - МДН

Вибір класу

Поєднайте селектор класів

Поєднайте селектор класів

Команний комбінатор

Будь-який елемент, що відповідає A та / або B. - MDN

Команний комбінатор

Універсальний селектор

Просто виберіть все!

Універсальний селектор

Поєднайте універсальний селектор

Поєднайте універсальний селектор

Суміжний вибір сестри

Сусідній комбінатор брати (+) розділяє два селектори та відповідає другому елементу лише у тому випадку, якщо він одразу слідує за першим елементом, і обидва є дітьми того самого батьківського елемента. - МДН

Суміжний вибір сестри

Загальний вибір сестри

Загальний комбінатор побратимів (~) розділяє два селектори та відповідає другому елементу лише у тому випадку, якщо він слідує за першим елементом (хоча і не обов'язково одразу), і обидва є дітьми одного і того ж батьківського елемента. - МДН

Загальний вибір сестри

Дитячий вибір

Дочірній комбінатор (>) розміщується між двома селекторами CSS. Він відповідає лише тим елементам, які відповідають другому селектору, що є дітьми елементів, які відповідають першому. - МДН

Дитячий вибір

Перший дитячий псевдоселектор

Псевдоклас CSS для першої дитини являє собою перший елемент у групі братних елементів. - МДН

Перший дитячий псевдоселектор

Тільки дитячий псевдоселектор

Псевдоклас CSS only-child являє собою елемент без жодних побратимів. Це те саме, що: перша дитина: остання дитина або: nth-дитина (1): nth-last-дитина (1), але з меншою специфічністю. - МДН

Тільки дитячий псевдоселектор

Останній дочірній псевдоселектор

Псевдоклас CSS з останньою дочіркою представляє останній елемент серед групи елементів братів. - МДН

Останній дочірній псевдоселектор

N-й дитячий псевдоселектор

Псевдоклас CSS: nth-child () відповідає елементам залежно від їх положення в групі братів і сестер. - МДН

N-й дитячий псевдоселектор

N-ий останній вибір дитини

CSS псевдоклас: nth-last-child () відповідає елементам, виходячи з їх положення серед групи братів і сестер, рахуючи з кінця. - МДН

N-ий останній вибір дитини

Перший з вибору типу

Псевдоклас CSS першого типу являє собою перший елемент свого типу серед групи елементів братів. - МДН

Перший з вибору типу

N-я селекторного типу

CSS псевдоклас (nth-of-type) (CSS) відповідає елементам заданого типу, виходячи з їх положення серед групи побратимів. - МДН

N-я селекторного типу

Селектор N-го типу з формулою

Селектор N-го типу
 Примітка:
: n-го типу (навіть)
: n-го типу (непарне)
: n-го типу (2)
: n-го типу (2n)
: n-го типу (3n-1)
: n-го типу (2n + 2)

Тільки з селектора виду

CSS-псевдоклас єдиного типу являє собою елемент, який не має однорідних братів та сестер. - МДН

Тільки з селектора виду

Останній з вибору типу

Псевдоклас CSS останнього типу являє собою останній елемент свого типу серед групи елементів братів. - МДН

Останній з вибору типу

Порожній селектор

Псевдоклас CSS: порожній являє собою будь-який елемент, у якого немає дітей. Діти можуть бути або вузлами елементів, або текстом (включаючи пробіли). Коментарі, інструкції з обробки та вміст CSS не впливають на те, чи вважається елемент порожнім. - МДН

Порожній селектор

Заперечення псевдокласу

Псевдоклас CSS: not () представляє елементи, які не відповідають списку селекторів. Оскільки це заважає вибору конкретних елементів, він відомий як псевдоклас заперечення. - МДН

Заперечення псевдокласу

Вибір атрибутів

Селектори атрибутів - це особливий вид селектора, який буде відповідати елементам на основі їх атрибутів та значень атрибутів. Їх загальний синтаксис складається з квадратних дужок ([]), що містять ім’я атрибута, а потім обов'язкове умова, яке відповідає значенню атрибута. Селектори атрибутів можна розділити на дві категорії залежно від того, як вони співпадають із значеннями атрибутів: Селектори атрибутів присутності та значень та Вибір атрибутів значення Підрядки. - МДН

Вибір атрибутів

Вибір значення атрибутів

Вибір значення атрибутів

Атрибут починається з вибору

Цей селектор вибере всі елементи з атрибутом attr, для якого значення починається з val. - МДН

Атрибут починається з вибору

Атрибут закінчується селектором

Цей селектор вибере всі елементи з атрибутом attr, для якого значення закінчується val. - МДН

Атрибут закінчується селектором

Атрибут Вибір підстановки

Цей селектор вибере всі елементи з атрибутом attr, для якого значення містить val substring. (Підрядник - це просто частина рядка, наприклад, "cat" - це підрядник у рядку "гусениця".) - MDN

Атрибут Вибір підстановки

Вітаємо, ви закінчили

Статті

🕹 CodePen

Будь-які запитання чи відгуки

Я хотів би почути ваші відгуки про те, як я можу зробити вас кращим для вас. Будь ласка, залишайте свої коментарі нижче або через мій Twitter.

Велика подяка Райану Ю за допомогу мені зробити гру CSS Selectors. Райан Ю є автором , де я навчився багатьох класних прийомів фронтального плану.

Щасливий кодовий знак сьогодні