Избегайте использования 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