Избегайте использования JavaScript вместе с RegEx - когда CSS делает все за вас!

Строго соблюдая мою доктрину «без всякой ерунды», давайте сразу начнем:

1. Класс содержит

[class*='section_'] {
  box-sizing: border-box;
}

Правила стиля, объявленные в теле приведенной выше команды, будут применяться к каждому элементу HTML, содержащему строку section_.

Например, только элементы HTML с именами классов, такими как section_large и section_medium, будут выбраны указанной выше командой CSS. Отлично, а?

Посмотрите этот быстрый пример, который я создал на JS Fiddle:

2. Класс содержит (с учетом регистра)

Исходя из нашего предыдущего примера, давайте посмотрим, что происходит, когда вы находитесь в сжатые сроки и при быстром вводе, как Джим Керри в Брюс Всемогущий, вы случайно вставляете заглавную S для раздела (строка 9 в HTML):

Поздравляем, ваш CSS не работает:

Быстрое исправление - вставка завершающего i прямо перед закрывающей скобкой гарантирует, что совпадение не чувствительно к регистру, например (строка 1 в CSS):

3. Проверьте, присутствует ли класс

Мы даже можем применить правила стилизации к HTML-элементам, если у них есть атрибут class:

Обратите внимание, что в строках 8 и 9 нашего HTML у нас есть 2 элемента ссылки, на которых присутствуют атрибуты класса, в то время как другие 2 элемента a в строках 12 и 13 нашего HTML не имеют атрибутов класса.

В строке 1 нашего CSS мы видим, что ко всем a элементам с атрибутом class применяются эти правила стиля. a к элементам без атрибута класса не будут применены эти стили.

4. Ссылки, которые начинаются с HTTPS и заканчиваются на .Org.

Мы можем настроить таргетинг на a ссылок, которые начинаются с определенных протоколов HTTP и заканчиваются указанными TLD (доменами верхнего уровня), такими как .com или .org. Оцените это:

Точно так же вы можете изменить протоколы HTTP и имена TLD по своему усмотрению в соответствии с вашей разметкой / логикой, но это лишь один из распространенных примеров.

5. Элементы с определенным языковым атрибутом

Предположим, вы создавали страницу с часто задаваемыми вопросами (F обязательно вопросы для магазина электронной коммерции, и вам необходимо настроить таргетинг на определенные языки. Мы можем легко указать языковые атрибуты для наших желаемых HTML-элементов и настроить их с помощью CSS следующим образом:

Обратите внимание, что у нас есть 2 атрибута в нашем HTML-атрибуте для языка хинди. Нам нужен только 1, но я оставил оба здесь, чтобы продемонстрировать различные способы объявления языковых атрибутов в элементе - с помощью атрибута lang и аналогичного атрибута data-[name] (обычно известного как атрибут данных).

Затем мы стилизуем их внутри нашего CSS - вы можете видеть, что селектор в строке 5 имеет приоритет над селектором в строке 1… отсюда и слово «каскадный».

6. Выберите изображения без атрибутов Alt.

Дайте угадаю - во время аудита доступности ARIA вас заметили на предмет отсутствия текста ALT на изображениях, и теперь вам нужно быстро исправить их к полудню. Этот селектор CSS идентифицирует каждое изображение с помощью атрибута NO ALT.

Имейте в виду, что атрибут ALT с пустым текстовым значением, таким как
<img alt='' />, по-прежнему считается имеющим атрибут alt - ему просто нужно значение.

Обратите внимание, что изображение без атрибута alt в строке 7 нашего HTML выбирается нашим селектором CSS img:not([alt]) {...} в строке 6 нашего CSS.

Это означает «применить эти правила стиля к каждому изображению без существующего атрибута alt».

7. Общие братья и сестры

Теперь представьте на минуту, что у вас есть статья с несколькими изображениями, но вы хотите, чтобы каждое изображение после первого подзаголовка h2 имело зеленую рамку. Как бы ты это сделал? Вот как:

В строке 5 нашего CSS мы говорим: «Привет, давайте каждое изображение после этого h2 внутри article элемента - зеленая граница шириной 4 пикселя ( пикселей) и вертикальное поле 5 пикселей ». Комбинатор ~ общих братьев и сестер нацелен на всех указанных братьев и сестер указанного элемента.

8. Соседний брат

А что, если бы мы хотели выбрать только изображение, следующее сразу за подзаголовком h2? Мы могли бы сделать что-то вроде:

Обратите внимание, что в строке 5 нашего CSS мы заменили ~ на +, что означает, что мы нацелены только на того же брата, который следует сразу за h2.

Примечание *: этот селектор нацелит на h2 только ближайшего брата, поэтому, другими словами, если мы поместим p между нашим h2 и изображением, наше правило CSS не будет работать в этом случае. :

Обратите внимание, что в строке 14 внутри нашего HTML мы добавляем тег p, который теперь становится следующим ближайшим родственником для h2. Наш селектор CSS в строке 5 нашей таблицы стилей будет применять эти правила только к изображению, которое следует сразу за нашим h2, поэтому мы не видим зеленой границы ни на одном изображении, которое следует за подзаголовком ... поскольку мы пробрались p сразу после h2.

Если мы хотим сделать этот селектор динамическим, мы можем использовать универсальный селектор, чтобы указать CSS: «Эй, какой бы HTML-элемент не стоял после этого подзаголовка h2, примените к нему следующие стили!», просто заменив имя элемента универсальным селектором * внутри нашего CSS следующим образом:

Обратите внимание, что мы заменили этот p на h3 в строке 14 нашего HTML, поэтому теперь мы можем добавить любой элемент HTML в строку 14, и правила стиля, продиктованные селектором в строке 5 нашего CSS, всегда будут применять к нему эти правила: )

Надеюсь, это помогло! Пожалуйста, посетите меня - PJcodes.com.

Больше контента на plainenglish.io