Псевдоклассы
Псевдоклассы
Сегодня короткий совет о моём любимом псевдоклассе :not.
Обычно в ЦСС применяют стили к элементу, который соответствует какому‑то условию: является определённым тегом, имеет нужный класс, находится первым, последним и так далее.
Псевдокласс :not применяет стили к элементу, который не соответствует условию: не является определённым тегом, не обладает классом, не стоит первым. Иногда этот псевдокласс помогает сделать код сильно проще и нагляднее.
Классический пример: обычно ненужные отступы последних элементов убирают в два шага. Сначала задают отступы для всех модулей, а затем обнуляют для последнего их них. Используя :not можно написать короче и нагляднее: не извращаться, а прямо сказать браузеру — «добавь отступ всем непоследним элементам».
ul li { margin-bottom: 9px; }
ul li:last-child { margin-bottom: 0; }
ul li:not(:last-child) { margin-bottom: 9px; }
В бытовухе верстальщика :not используется не особо часто, но иногда помогает быстро решить задачу. Вот пара примеров из кода под рукой, селекторы получаются наглядные и их назначение понятно с первого взгляда.
.article:not(.is__loaded) { … }
input:not(:valid) { … }
.spread:not(.is__service) { … }
.product:not(.is__accessory) .suggestions { … }
Ещё :not часто выручает, когда приходится парсить разметку Яваскриптом и нужно отфильтровать лишнюю шелуху:
// Заголовки, которые не нужно учитывать
const IGNORED_HEADERS = [
'.sectionTitle-header h1',
'.is__noHeader',
'.isNoHeader',
'.is__noHeader h2',
'.isNoHeader h2',
]
// Превращаем джойном массив заголовков в строку через запятую и передаём в :not
const $spreadTitle = $spread.querySelectorAll(`h2:not(${IGNORED_HEADERS.join(',')})`)
// А в Джейквери есть удобный чейнинг-метод not(), который умеет принимать массив
const $spreadTitle = $spread.find('h2').not(IGNORED_HEADERS)
P. S. Вложить один :not в другой не получится, зато можно сделать забавный в своей бессмысленности селектор :not(*), который найдёт любой элемент, являющийся не любым, то есть не найдёт ничего :‑)
P. P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.