Псевдокласс not в CSS

Содержание

Псевдокласс :not в CSS

Псевдокласс CSS :not используется для применения стилей к элементу или элементам, которые не сопоставляются с указанными селекторами или псевдоклассами.

Тип псевдокласса

Применяется: ко всем элементам.

Значения

Значением псевдокласса :not является указание в скобках одного селектора или псевдокласcа, к которому не будут применены заданные стили.

Запрещено в качестве значения использовать псевдоэлементы и сам псевдокласс :not — :not(:not) .

Синтаксис

Пример CSS: использование :not

Результат. Использование псевдокласса CSS :not.

Псевдокласс :not в CSS3.

Всем привет. Сегодня я расскажу про псевдокласс not(), появившийся в CSS3.

Псевдокласс not, как понятно из его названия, все отрицает. Давайте рассмотрим на примере.

Итак, у нас есть параграф с классом test и с классом block. Чтобы применить стиль, например, ко всем параграфам, которые не имеют класса test, нужно прописать следующее:

Теперь параграф с классом block будет синим цветом, а параграф с классом test — нет. Отрицать можно не только классы, но и все другое. Например, атрибуты.

У нас есть текстовый элемент формы, у которого имеется атрибут readonly, и есть другой текстовый элемент формы, у которого этого атрибута нет. Мы решили применить стиль ко всем элементам формы, у которых нет данного атрибута. Для этого пропишем следующее:

input:not([readonly]) <
border: 1px solid green;
>

Вот такое простое, но полезное свойство. Надеюсь, кому-нибудь пригодится. Спасибо за внимание и до следующей статьи!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    CSS :: Псевдокласс :not

    Псевдокласс :not (от англ. not – не) позволяет выбрать все элементы требуемого типа, которые не подходят под шаблон указанного в скобках селектора. При этом нельзя использовать в качестве значения в скобках сам псевдокласс и псевдоэлементы. Например, если задано правило span:not([contenteditable]) <блок объявлений>, то в документе будут выбраны все элементы ‘span’ , у которых отсутствует атрибут contenteditable .

    Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html -документа не указываются и отделяются от указанного в селекторе элемента двоеточием ‘:’ . При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

    Псевдокласс :not

    Псевдокласс :not() задает стиль для элементов, который не описываются заданным селектором.

    Таким образом можно исключить из CSS правила некоторые элементы.

    В качестве селектора могут использоваться только простые селекторы типа, класса, атрибута, id и псевдокласса.

    Допустимые значения

    Применимо ко всем элементам
    Соответсвие версиям CSS CSS 3
    Поддерживается браузерами
    • Internet Explorer 9 и выше
    • Firefox 1 и выше
    • Opera 9.5 и выше
    • Safari 1.1 и выше
    • Chrome 1 и выше

    Пример

    Твой код:
    Результат:

    Заметки

    Псевдокласс :not() в качестве селектора для псевдокласса :not() использоваться не может.

    Псевдокласс :notCSS3-генератор ☛

    Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.

    Синтаксис ?

    В качестве селектора могут указываться единичные псевдоклассы, теги, идентификаторы, классы и селекторы атрибутов. Нельзя использовать псевдокласс :not (конструкция :not(:not(. )) запрещена) и псевдоэлементы.

    Обозначения

    Описание Пример
    Указывает тип значения.
    A && B Значения должны выводиться в указанном порядке. &&
    A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
    A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
    [ ] Группирует значения. [ crop || cross ]
    * Повторять ноль или больше раз. [, ]*
    + Повторять один или больше раз. +
    ? Указанный тип, слово или группа не является обязательным. inset?
    Повторять не менее A, но не более B раз.
    # Повторять один или больше раз через запятую. #
    Пример

    В данном примере стиль применяется ко всем элементам за исключением того, в параметрах которого установлено type=»submit» (кнопка «Отправить»).

    Спецификация ?

    Спецификация Статус
    Selectors Level 4 Рабочий проект
    Selectors Level 3 Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    Браузеры: Настольные Мобильные ?

    Internet Explorer Chrome Opera Safari Firefox
    9 1 9.5 3.2 1
    Android Firefox Mobile Opera Mobile Safari Mobile
    2.1 1 10 3.2

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — элемент полностью поддерживается браузером;
    • — элемент браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

    Число указывает версию браузреа, начиная с которой элемент поддерживается.

    Полное руководство по псевдоклассам и псевдоэлементам

    Всем привет. В самом начале своей работы в веб-дизайне, я изучал все тяжелым способом: методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen и прочих волшебных вещей, окружающих нас сегодня. Если бы раньше кто-либо показал мне азы веб дизайна, особенно по части CSS, это было бы невероятно полезно.

    Теперь я намного более опытен и хочу поделиться своим простым, понятным и не догматическим руководством по псевдоклассам и псевдоэлементам.

    Если вы опытный веб-дизайнер или разработчик, то вы должны знать большинство обсуждаемых здесь псевдоклассов и псевдоэлементов. Однако я рекомендую вам ознакомиться с содержанием, возможно, вы встретите что-то незнакомое для себя.

    Перед тем как погрузиться в вопрос, разберемся с терминами — если в названии есть псевдоклассы и псевдоэлементы, то что значит часть слова “псевдо”? Вот что говорит dictionary.com:

    прилагательное 1. Ненастоящий, но похожий внешне; притворяющийся; ложный или мнимый 2. Почти такой же или пытающийся быть таким же

    Не перегружаясь техническим определением W3C, псевдокласс можно определить, как фантомное состояние или специфическую характеристику элемента, которая может быть выделена с помощью CSS. Наиболее распространенные псевдоклассы это :link , :visited , :hover , :active , :first-child и :nth-child . Существуют и другие псевдоклассы, им мы тоже уделим внимание.

    Псевдоклассы в стилях всегда выделяются предшествующим двоеточием ( : ), затем идет название псевдокласса и иногда значение в скобках.

    Псевдоэлементы похожи на виртуальные элементы, которые мы можем обрабатывать как обычные HTML-элементы. Но они не существуют в дереве документа или в DOM, мы создаем их с помощью CSS.

    Наиболее распространенные псевдоэлементы это :after , :before и :first-letter , мы рассмотрим их в конце статьи.

    Одно или два двоеточия ставить перед псевдоэлементами?

    Короткий ответ для большинства случаев — без разницы.

    Двойное двоеточие ( :: ) было добавлено в CSS3, чтобы дифференцировать для различения псевдоэлементов типа ::before и ::after от псевдоклассов, таких как :hover и :active . Все браузеры поддерживают двойное двоеточие, кроме Internet Explorer (IE) 8 и ниже.

    При этом некоторые псевдоэлементы, например, ::backdrop работают только с двойным двоеточием.

    Лично я использую одно двоеточие ради совместимости с устаревшими браузерами, разумеется, кроме тех случаев, когда псевдоэлементам требуется двойное двоеточие.

    Вы можете выбрать любой вариант, здесь нет однозначного “за” или “против”.

    Однако спецификация на момент написания статьи рекомендует использовать одно двоеточие, по уже упомянутой здесь причине — обратной совместимости.

    Не забывайте, что в CSS3 псевдоэлементы выделяются двойным двоеточием, типа a::after < … >, для их отличия от псевдоклассов. Вы можете иногда это видеть в CSS. При этом CSS3 также позволяет использовать одно двоеточие ради обратной совместимости и в настоящее время мы рекомендуем придерживаться этого синтаксиса.

    В заголовках этой статьи, псевдоэлементы, поддерживающие оба синтаксиса будут показаны в обоих вариантах, а, соответственно, псевдоэлементы работающие только с двойным двоеточием будут показаны с ним.

    Когда использовать и не использовать генерируемый контент в CSS

    Генерируемый контент в CSS реализуется с помощью комбинации свойства content с псевдоэлементами :before или :after .

    Контентом может быть простой текст или контейнер, которым мы манипулируем при помощи CSS, чтобы выводить графическую форму или декоративный элемент. Здесь я буду говорить о первом типе контента — тексте.

    Генерируемый контент не стоит использовать для важного текста по следующим причинам:

    • Он будет недоступен скрин-ридерам;
    • Он будет невыделяем;
    • Если генерируемый контент использует излишнее содержание для украшения, скрин-ридеры будут читать его, что ухудшит впечатления пользователей.

    Используйте генерируемый контент для декорации и незначительного текста, но убедитесь, что он правильно обрабатывается скрин-ридерами, чтобы использующие эту технологию не отвлекались на него. Основывайтесь на методике “прогрессивного улучшения”, когда собираетесь использовать генерируемый контент.

    На Smashing Magazine есть отличная статья Габриеля Романато об использовании генерируемого контента.

    Экспериментальные псевдоклассы и псевдоэлементы

    Экспериментальными называют те псевдоклассы и псевдоэлементы, чья спецификация еще не стабильна и не окончательна. Их синтаксис и поведение еще могут измениться.

    Однако мы можем использовать экспериментальные псевдоклассы и псевдоэлементы с помощью вендорных префиксов; о поддержке вы можете узнать с помощью Can I Use, а для удобства работы есть такие инструменты как -prefix-free или Autoprefixer.

    В этой статье у всех экспериментальных псевдоклассов и псевдоэлементов будет соответствующая пометка.

    Псевдоклассы

    Мы начнем с псевдоклассов для определенных состояний.

    Псевдоклассы состояний

    Псевдоклассы состояний обычно применяются после действий пользователя. При этом “действием” может считаться и отсутствие действия, например, в случае с непосещенной ссылкой.

    Итак, рассмотрим их.

    Псевдокласс :link представляет нормальное состояние ссылок и используется для выделения ссылок, которые до сих пор не посещены. В стилях рекомендуется объявлять этот псевдокласс перед всеми остальными классами этой категории. Полный порядок псевдоклассов такой: :link , :visited , :hover и :active .

    Этот псевдокласс можно пропустить:

    :visited

    Псевдокласс :visited используется для стилизации ссылок, уже посещенных пользователем. В стилях он указывается вторым, после псевдокласса :link :

    :hover

    Псевдокласс :hover используется для стилизации элемента, на который в данный момент наведен курсор. Это может быть любой элемент, хотя применение этого псевдокласса для ссылок является самым распространенным случаем.

    :active

    Псевдокласс :active используется для стилизации “активированных” элементов, путем нажатия мыши или касания к экрану. Активация также может производиться и с клавиатуры, также как в случае с псевдоклассом :focus .

    Он и работает аналогично :focus , с единственной разницей, что псевдокласс :active фиксирует событие между нажатием и отпусканием клавиши мыши.

    Оно следует четвертым в стилях (после :hover ).

    :focus

    Псевдокласс :focus используется для стилизации элемента, получившего фокус с помощью курсора, касания или нажатия на клавиатуре. Он часто используется в элементах форм.

    Бонус: миксин Sass для ссылок

    Если вы используете препроцессоры CSS, типа Sass, этот раздел должен заинтересовать вас. Если вы их не используете (не бойтесь, это нормально), вы можете пропустить его.

    Итак, в духе оптимизации нашего рабочего процесса, ниже показан миксин Sass, позволяющий создать базовый набор ссылок.

    Идея миксина состоит в отсутствии настроек по умолчанию в качестве аргументов, мы просто декларируем все 4 состояния ссылок.

    Псевдоклассы :focus и :active обычно декларируются вместе, но при желании вы можете разделить их.

    Учтите, этот миксин может быть применен к любому элементу HTML, не только к ссылкам. Вот он:

    Структурные псевдоклассы

    Структурные псевдоклассы направлены на дополнительные данные в дереве документа или DOM и не могут быть заменены другим типом селекторов или их комбинацией.

    :first-child

    Псевдокласс :first-child выделяет элемент, который является первым потомком своего родительского элемента.

    В следующем примере только первый элемент li будет выделен оранжевым текстом.

    :first-of-type

    Псевдокласс :first-of-type выделяет первый элемент своего типа в указанном родительском контейнере.

    В следующем примере первый элемент li и первый элемент span будут выделены оранжевым цветом.

    :last-child

    Псевдокласс :last-child выделяет элемент, которыя является последним дочерним элементом в родительском контейнере.

    В следующем примере, последний элемент li будет выделен оранжевым цветом.

    :last-of-type

    Псевдокласс :last-of-type выделяет последний элемент своего типа в родительском контейнере.

    В следующем примере, текст в последнем li и последнем span будет оранжевым.

    Псевдокласс :not также известен как псевдокласс-отрицание. Он принимает в скобках аргумент — другой селектор. Этим аргументом может быть и другой псевдокласс. Аргументы могут составлять цепочку, но сам :not не может в этой цепочке передаваться в качестве аргумента.

    В следующем примере, псевдокласс :not выберет все элементы, не подпадающее под селектор-аргумент. Оранжевым будет весь текст, кроме элемента li с классом .first-item :

    Теперь попробуем сделать цепочку из двух псевдоклассов :not . У всех элементов будет черный цвет и желтый фон, кроме элемента li с классом .first-item и последнего li в списке.

    Демо

    :nth-child

    Псевдокласс :nth-child выделяет один или более элементов в зависимости от их порядкового номера в разметке.

    Это один из самых универсальных и надежных псевдоклассов в CSS.

    Все псевдоклассы :nth принимают аргумент в виде формулы в скобках. Формула может быть просто целым числом, может структурироваться в виде an+b или использовать ключевое слово odd или even .

    • a это целое число;
    • n это литерал (т.е. мы просто используем букву n внутри формулы);
    • + это оператор (это может быть как + , так и — );
    • b это целое число, используемое только при использовании оператора.

    Вот список с греческим алфавитом, на базе которого мы сделаем несколько примеров:

    Выделим второй элемент в списке, только “Beta” будет оранжевой:

    Теперь выделим все элементы с порядковыми номерами, кратными двум. Оранжевыми будут “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa”:

    Те же самые четные элементы можно выделить и с помощью ключевого слова even :

    А теперь выберем все элементы кратные двум, начиная с шестого. Итак, оранжевыми будут “Zeta,” “Theta” и “Kappa”.

    Демо

    :nth-last-child

    Псевдокласс :nth-last-child работает аналогично :nth-child , но выбирает элементы не с начала, а с конца.

    Продолжим мучать греческий алфавит. Выберем второй элемент с конца — оранжевой у нас будет только “Iota”:

    Теперь выберем все дочерние элементы по порядковому номеру с конца, кратному двум. Это будут Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha”:

    Теперь выделим их же с помощью ключевого слова:

    И, наконец. выберем все элементы с конца кратные двум начиная с шестого. “Epsilon,” “Gamma” и “Alpha”!

    :nth-of-type

    Псевдокласс :nth-of-type схож с :nth-child с той разницей, что он обладает большей специфичностью, так как выбирает конкретный тип элемента внутри родительского контейнера.

    В следующем примере, оранжевый цвет будет у второго параграфа.

    :nth-last-of-type

    Псевдокласс :nth-last-of-type делает то же, что и :nth-of-type , но отсчитывая с конца.

    В следующем примере мы будем выбирать второй параграф с конца (это будет первый параграф в статье):

    Дополнительные ресурсы по классам семейства :nth

    :only-child

    Псевдокласс :only-child выбирает единственного потомка родительского элемента.

    В следующем примере, в первом ul есть только один элемент, который будет выделен оранжевым. В следующем ul несколько потомков, поэтому их этот селектор не затронет.

    :only-of-type

    Псевдокласс :only-of-type выбирает элемент, у которого нет соседних элементов того же типа. Он похож на :only-child , но более осмыслен за счет указания конкретного элемента.

    В следующем примере в первом ul только один элемент списка, который и будет выделен оранжевым.

    :target

    Псевдокласс :target выбирает элемент, ID которого используется в качестве хэша в URL.

    В следующем примере, статья с ID target будет выделяться, когда URL в адресной строке будет завершаться на #target .

    URL: http://awesomebook.com/#target

    Совет: короткая запись background в стилях успешно заменяет background-color .

    Псевдоклассы валидации

    Формы всегда были ядом веб-дизайна и веб-разработки. С помощью псевдоклассов валидации, мы можем сделать процесс заполнения форм более плавным и приятным.

    Заметьте, что несмотря на то, что большинство псевдоклассов этого раздела работают с элементами форм, некоторые из них могут работать и с другими элементами HTML.

    :checked

    Псевдокласс :checked выбирает радиокнопки, чекбоксы и опции, которые были отмечены пользователем.

    В следующем примере, при выделении пользователем чекбокса, его метка подсвечивается, что улучшает интерфейс.

    Демо

    :default

    Псевдокласс :default выбирает элемент, заданный в качестве дефолтного в группе похожих элементов.

    В случае, если вам надо выбрать кнопку по умолчанию в форме с незаданным классом, вы можете использовать псевдокласс :default .

    Учитывайте, что наличие кнопки “Reset” или “Clear” в форме создает проблемы с юзабилити. Подробнее об этом можно прочитать в следующих статьях.

    Демо

    :disabled

    Псевдокласс :disabled выбирает отключенный элемент формы (элемент, который пользователь не может выделить, отметить, активировать или перенести на него фокус).

    В следующем примере поле ввода name , поэтому оно будет выведено наполовину прозрачным.

    Совет: в разметке не обязательно писать disabled=»disabled» , того же результата можно достичь просто использовав атрибут disabled . Однако полная запись необходима в XHTML.

    Демо:

    :empty

    Псевдокласс :empty выбирает элементы, в которых нет никакого содержимого. Если в элемент есть другой элемент HTML, символ или пробел, элемент не считается пустым.

    Вот более полные определения:

    Нет содержимого или каких-либо символов. Комментарии HTML содержимым не считаются.

    Не пустой элемент

    В элементе есть какие-либо символы, даже невидимые, например, пробел.

    В следующем примере:

    • В верхнем контейнере есть текст, поэтому у него будет оранжевый фон;
    • Во втором контейнере есть пробел, который считается контентом, его фон также будет оранжевым;
    • В третьем контейнере нет ничего — он пустой и поэтому у него желтый фон.
    • В последнем контейнере есть комментарий HTML, который не считается контентом и поэтому у контейнера желтый фон.

    Демо:

    :enabled

    Псевдокласс :enabled выбирает элементы, включенные для пользователя; по умолчанию все элементы формы включены, если в разметке им не задан атрибут disabled .

    Мы можем использовать комбинацию :enabled и :disabled , чтобы обеспечить визуальную обратную связь, улучшая тем самым пользовательский опыт.

    В следующем примере, ранее отключенное поле ввода name включено, к нему добавлена однопиксельная граница зеленого цвета и полная непрозрачность.

    Совет: использование в разметке enabled=»enabled» не требуется, достаточно просто enabled ; исключением является только XHTML.

    Демо:

    :in-range

    Псевдокласс :in-range выбирает элементы, которым задан диапазон и значение, которых входит в этот диапазон.

    В следующем примере поле ввода поддерживает диапазон между 5 и 10, все значения между ними вызовут измение цвета границы поля на зеленый.

    Демо:

    :out-of-range

    Псевдокласс :out-of-range выбирает элемент, у которого есть диапазон и значение которого не входит в этот диапазон

    В следующем примере поле ввода поддерживает диапазон от 1 до 12 — для всех остальных значений будет задан оранжевый цвет границы поля.

    Демо:

    :indeterminate

    Псевдокласс :indeterminate выбирает элементы ввода типа радиокнопок и чекбоксов, которые не выделены или выделение которых снято после загрузки страницы.

    Образцом этого можно назвать загрузку страницы с радиокнопками, ни одна из которых не выбрана по умолчанию или ситуацию, когда свойство indeterminate задается чекбоксу с помощью JavaScript.

    Демо:

    :valid

    Псевдокласс :valid выбирает элемент формы, если она заполнена корректно в соответствии с требуемым форматом.

    В следующем примере поле ввода email отформатировано правильно, поэтому оно будет считаться валидным и, соответственно, получит однопиксельную зеленую границу.

    :invalid

    Псевдокласс :invalid выбирает элемент формы, если она заполнена некорректно в соответствии с требуемым форматом.

    В следующем примере, поле ввода email отформатировано неправильно, поэтому оно будет считаться невалидным и, соответственно, получит однопиксельную оранжевую границу.

    Демо:

    :optional

    Псевдокласс :optional выбирает поля ввода, которые не являются обязательными. Другими словами, любой элемент input без атрибута required будет выбран псевдоклассом :optional .

    В следующем примере поле ввода опционально — у него нет атрибута required и поэтому текст в этом поле будет серым.

    :read-only

    Псевдокласс :read-only выбирает элемент, которые не может быть отредактирован пользователем. Он похож на :disabled — и выбор между ними зависит от использованного атрибута в разметке.

    Этот псевдокласс может быть полезен, например, в форме с предварительно заполненной информацией, которую нельзя изменить, но которую надо показать пользователю.

    В следующем примере у элемента input есть атрибут readonly . Мы выделим этот элемент серым цветом благодаря псевдоклассу :read-only .

    Демо:

    :read-write

    Псевдокласс :read-write выбирает элементы, которые могут редактироваться пользователем. Он может работать со всеми элементами HTML с атрибутом contenteditable .

    Этот псевдокласс можно сочетать с псевдоклассом :focus для улучшения пользовательского опыта в определенных ситуациях.

    В следующем примере, пользователь может после щелчка мышью редактировать содержимое элемента div . Мы облегчим пользователю понимание этого, добавив стили, отличающие редактируемую часть контента от всего остального.

    Демо:

    :required

    Псевдокласс :required выбирает поля ввода, которым задан атрибут required .

    В дополнение к традиционному астериску (*), которым обычно отмечают обязательные поля, мы можем добавить стили CSS, таким образом мы берем лучшее из двух миров.

    В следующем примере, у поля ввода есть атрибут required . Мы можем улучшить впечатления пользователя, соответствующим стилем показав обязательность поля.

    Демо:

    :scope (эксп.)

    Псевдокласс :scope имеет смысл, когда он привязан к HTML-атрибуту scoped тега style .

    Если этого атрибута у тега style нет в разделе страницы, значит этот псевдокласс выберет элемент html , который является зоной видимости для стилей по умолчанию.

    В следующем примере, у блока HTML есть стили с атрибутом scoped , поэтому весь текст второго элемента section будет выделен курсивом.

    Демо:

    Псевдоклассы, связанные с языком страницы

    Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не работают с медиа-контентом типа изображений или видео.

    :dir (эксп.)

    Псевдокласс :dir выбирает элемент, направленность текста в котором определена в документе. Другими словами, чтобы использовать этот псевдокласс, нам надо в разметке у соответствующего элемента добавить атрибут dir .

    На данный момент поддерживается два направления текста: ltr (слева направо) и rtl (справа налево).

    На момент написания статьи только Firefox (с префиксом -moz-dir() ) поддерживается псевдокласс :dir . В будущем префикс, скорее всего, будет не нужен, поэтому в примерах селектор задан как с префиксом, так и без него.

    Примечание: Сочетание префиксной и безпрефиксной версий в одном правиле не работает. Надо создавать два отдельных правила.

    В следующем примере оранжевым цветом будет выделен параграф на арабском (как известно, текст в нем пишется справа налево).

    В англоязычном параграфе (слева направо) текст будет синим.

    Демо:

    Псевдокласс :lang выбирает элемент с указанным языком. Язык может быть задан с помощью атрибута lang=»» , соответствующего элемента meta или же в HTTP-заголовках.

    Атрибут lang=»» обычно используется с тегом html , но он также может применяться и к любому другому тегу.

    Для чего этом можно использовать? Например, общей практикой является использование традиционных для каждого языка кавычек с помощью свойства CSS quotes . Однако большинство браузеров (включая IE9 и выше) способны добавлять нужные кавычки автоматически, если они не объявлены в CSS.

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

    Вот, например, немецкие кавычки, добавленные браузером:

    Однако, в большинстве случаев, немецкие кавычки добавленные в CSS выглядят так:

    Верными являются оба варианта. Поэтому решение остается за вами — отдать ли выбор кавычек на усмотрение браузера или использовать псевдокласс :lang и свойство CSS quotes .

    Давайте добавим кавычки с помощью CSS.

    Демо:

    Остальные псевдоклассы

    Теперь перейдем к оставшемся псевдоклассам и их функциональности

    Псевдокласс :root ссылается на высший родительский элемент в документе.

    Виртуально во всех случаях в роли :root будет элемент html . Однако это может быть и другой элемент, если используется другой язык разметки, такой как SVG или XML.

    Давайте добавим фоновый цвет к элементу html .

    Примечание: мы можем добиться того же эффекта, использовав в качестве селектора html . Но так как :root псевдокласс у него большая специфичность, чем у селектора элемента.

    :fullscreen (эксп.)

    Псевдоклассс :fullscreen выбирает элемент, выведенный на всю ширину экрана.

    Однако, он не рассчитан на работу при нажатии пользователем F11 и переходе браузера в полноэкранный режим. Он скорее ориентирован на работу с JavaScript Fullscreen API, предназначенном для изображений, видео и игр, выполняющихся в родительском контейнере.

    О переходе в полноэкранный режим выводится сообщение в верхней части браузера, вернуться из него можно нажав клавишу Escape . Мы сталкиваемся с этим при просмотре видео в максимальном размере на YouTube или Vimeo.

    Если вы собираетесь использовать псевдокласс :fullscreen , учитывайте, что стили браузеров в этом режиме очень различны. И вам придется использвать браузерные префиксы не только в CSS, но и в JavaScript. Я рекомендую использовать библиотеку Эрнан Райчерта screenfull.js, решающую большую часть проблем с кроссбраузерными глюками.

    Рассмотрение Fullscreen API находится за пределами этой статьи, вот сниппет, который будет работать в браузерах на движках WebKit и Blink.

    Демо:

    Псевдоэлементы

    Как упоминалось в начале статьи, псевдоэлементы можно сравнить с виртуальными элементами, которые можно обрабатывать как обычные элементы HTML. Они не существуют в дереве документа или в DOM, это значит, что мы их создаем с помощью CSS.

    Также напомню, что разница между двойным и одиночным доветочиями это просто визуальное различие между псевдоэлементами стандартов CSS 2.1 и CSS3, вы можете свободно использовать любой вариант.

    ::before/:before

    Псевдоэлемент :before , также как и его сосед :after добавляет содержимое (текст или форму) к другому элементу HTML. Еще раз отмечу, что этого контента нет в DOM, но им можно манипулировать, как будто он есть. Свойство content надо добавлять в CSS.

    Запомните, что добавленный в псевдоэлемент текст нельзя выделить.

    В результате будет выведено:

    Примечание: Обратили внимание на пробел после “Hello ”? Да, о пробелах надо позаботиться самостоятельно.

    ::after/:after

    Псевдоэлемент :after также используется для добавления содержимого (текста или формы) к другому элементу HTML. Этот контент отсутствует в DOM, но им можно манипулировать, как будто он есть; свойство content надо добавлять в CSS. Текст, добавленный в псевдоэлемент, нельзя выделить.

    В результате будет выведено:

    ::backdrop (эксп.)

    Псевдоэлемент ::backdrop это бокс, генерируемый перед полноэкранным элементом, расположенным над всем остальным контентом. Он используется в сочетании с псевдоклассом :fullscreen для изменения цвета фона максимизированного окна — если вас не устраивает дефолтный черный.

    Примечание: для псевдоэлемента ::backdrop обязательно двойное двоеточие, иначе он не работает.

    Разовьем наш пример с псевдоклассом :fullscreen :

    Демо:

    ::first-letter/:first-letter

    Псевдоэлемент :first-letter выбирает первый символ на строке текста. Если перед текстом есть элемент типа изображения, видео или таблицы, он не влияет на текст и первая буква по-прежнему выбирается из текста.

    Это отличная вещь для использования в параграфах, для повышения типографской привлекательности без использования изображений и внешних ресурсов.

    Совет: этот псевдоэлемент способен захватывать первую букву, сгенерированного контента в :before , несмотря на его отсутствие в DOM.

    ::first-line/:first-line

    Псевдоэлемент :first-line выбирает первую строку в элементе. Он не работает со строчными элементами, только с блочными.

    При использовании в параграфе, например, только первая строка будет стилизована, даже если текст обтекает другой элемент.

    ::selection

    Псевдоэлемент ::selection используется для стилизации выделенного текста. Браузеры на движке Gecko пока используют версию с префиксом ::-moz-selection .

    Примечание: сочетание в одном правиле синтаксиса с префиксом и без префикса не работает, надо создавать два отдельных правила.

    ::placeholder (эксп.)

    Псевдоэлемент ::placeholder выбирает текст, добавленный в качестве заглушки в элементы формы с помощью атрибута placeholder .

    Его также можно указывать как ::input-placeholder , этот синтаксис фактически и используется в CSS.

    Примечание: этот элемент еще не является частью стандарта, с большой вероятностью его имплементация изменится в будущем, поэтому используйте его с осторожностью.

    В некоторых браузерах (IE 10 и Firefox до версии 18), псевдоэлемент ::placeholder реализован как псевдокласс, но во всех остальных браузерах это псевдоэлемент, поэтому если вы не поддерживаете старые версии Firefox и IE 10, вы будете писать примерно такой код:

    Заключение

    Итак, похоже, это все.

    Псевдоклассы и псевдоэлементы CSS однозначно удобны, не так ли? Они дают такое количество возможностей, что вы чувствуете себя перегруженными. Но в этом все жизнь веб-дизайнеров и разработчиков.

    Тщательно тестируйте код. Хорошо реализованные псевдоклассы и псевдоэлементы должны пройти долгий путь.

    Возможности CSS, которые вам понравятся в 2015

    CSS постоянно развивается, и с началом года самое время взглянуть на несколько новых функций, с которыми вы сможете экспериментировать.

    В этой статье я рассмотрю некоторые новые модули и отдельные возможности CSS, которые уже поддерживаются браузерами. Но пока не все эти функции вы сможете запустить на продакшене, а некоторые доступны только в качестве эксперимента. Несмотря на это, вы найдёте много интересных вещей, с которыми можно поиграться — хоть и только на этапе разработки.

    CSS-селекторы четвёртой версии

    Спецификация селекторов третьей версии хорошо реализована в браузерах и предоставляет нам такие полезные селекторы, как :nth-child . Четвёртая же версия даёт нам гораздо больше способов разметить контент при помощи CSS.

    Отрицающий псевдокласс not

    Селектор :not появился в третьей версии, но в четвёртой он был обновлён. В третьей спецификации вы можете передать селектор, к которому не должны применяться CSS-свойства. Для того чтобы весь текст, кроме текста с классом .intro стал полужирным, вы можете использовать следующее правило.

    В четвёртой версии вы можете передавать список селекторов через запятую.

    Псевдокласс has

    Этот псевдокласс принимает список селекторов в качестве аргумента и CSS-свойства будут применяться, если любой из переданного списка селекторов найдёт подходящий элемент. Лучше посмотреть на примере. Здесь каждому элементу a , который содержит в себе изображение, будет нарисована чёрная рамка:

    Во втором примере я совмещаю :has и :not и выбираю только те элементы li , которые не содержат элемент p :

    Псевдокласс совпадения matches

    Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:

    Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

    Режимы наложения в CSS

    Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.

    В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply , я могу применить интересный эффект к изображениям.

    Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h1 и затем в .box2 я устанавливаю mix-blend-mode: screen .

    Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode и mix-blend-mode доступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.

    Если вам требуется более полная поддержка для старых браузеров и вы не уверены, что стоит использовать режимы наложения в продакшене, не забывайте — их можно использовать на этапе разработки, чтобы избежать работы с фотошопом. А когда вы получите итоговые изображения, создайте для продакшена картинки в графическом редакторе, заменив CSS-эффекты.

    Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.

    Функция calc

    Функция calc() является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.

    В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:

    Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:

    В современных браузерах calc() хорошо поддерживается, хотя использование для вычисления позиции фона в IE9 приводит к падению браузера.

    CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.

    CSS-переменные

    Возможность использовать переменные в CSS — это значительное преимущество CSS-препроцессоров. В самом простом примере, мы можем сохранить огромное количество времени определив цвета и шрифты, используемые в нашем дизайне, а затем использовать переменные, когда потребуется какой-то конкретный шрифт или цвет. Если мы решим изменить шрифт или цветовую палитру нам надо будет поменять это только в одном месте.

    CSS-переменные, описанные в первой версии модуля пользовательские CSS-свойства для каскадных переменных, приносят эту функциональность в CSS.

    К сожалению, поддержка браузерами CSS-переменных в настоящее время ограничена Firefox.

    Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.

    CSS-исключения

    Мы все знакомы с обтеканием в CSS. Самым простым примером может служить обтекание текстом изображения. Но обтекание довольно ограничено, так как плавающий элемент всегда прижимается кверху, и пока мы можем прижимать изображение к левому краю и обтекать его текстом справа и снизу. Не существует способа разместить изображение по центру документа и обтекать его текстом со всех сторон.

    Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow и его значение both , после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.

    Исключения в Internet Explorer

    Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms . Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.

    CSS-фигуры

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

    В первой версии спецификации CSS-фигуры определяются новым свойством shape-outside . Оно может быть использовано на плавающем элементе. В примере ниже я использую shape-outside чтобы изогнуть текст вокруг обтекаемого изображения.

    CSS-фигуры позволяют нам изогнуть текст вокруг изображения воздушного шара

    Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside , а с этим придёт много интересных возможностей.

    Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.

    CSS-сетки

    Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.

    Сетки дают нам метод для создания структуры, которая не отличается от использования таблиц для разметки. Однако, описывая сетки в CSS, а не в HTML, мы можем создавать макеты, которые могут быть изменены при помощи медиавыражений в зависимости от контекста. Это позволяет разделить порядок элементов в коде от их визуального представления. Для дизайнеров это означает, что вы можете свободно изменять позицию элементов на странице для лучшего представления макета на разных контрольных точках, и не нужно идти на компромисс между разумно структурированным документом и вашим адаптивным дизайном. В отличие от макетов, основанных на HTML-таблицах, вы можете наслаивать элементы в сетках. Так что, если потребуется, один элемент может перекрывать другой.

    В примере ниже мы объявляем сеткой элемент с классом .wrapper . Он содержит три колонки с шириной в 100px , отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

    Пример сетки в Chrome

    Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.

    Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.

    У вас есть любимая новая спецификация, не рассмотренная здесь?

    Надеюсь, вам понравился этот краткий обзор некоторых новых возможностей CSS. Используйте ссылки на указанные ресурсы, чтобы узнать подробнее о том, что вас заинтересовало. Напишите мне в комментариях, если у вас есть любимая развивающаяся CSS-особенность, о которой, по вашему мнению, люди должны узнать, или дополнительные ресурсы и примеры для любой из возможностей, описанной мной.

    Псевдоклассы CSS

    Помимо CSS селекторами рассмотрим псевдоклассы.

    a :hover < color: #333333; >
    селектор :псевдокласс свойство значение

    Псевдоклассы, применимые только к ссылкам

    Псевдоклассы, благодаря которым осуществляется динамическое изменение элемента

    Теперь вспомним о хэш-ссылках. Тег a также можно вынести за пределы div.

    Для элементов формы, таких как input, select и textarea

    Помимо :checked есть ещё :indeterminate. Но он может найти своё применение разве что с помощью jQuery (автор). А вместо остальных можно применить селектор с соответствующим атрибутом.

    в теге есть атрибут в теге отсутствует атрибут описание атрибута
    :read-only [readonly] :read-write :not([readonly]) не может изменяться пользователем
    :required [required] :optional :not([required]) обязательное для заполнения
    :disabled [disabled] :enabled :not([disabled]) недоступным для активации, не может получить фокус

    Структурные псевдоклассы

    Пропускаю :root в связи с его заменой на html.

    :nth-last-child действует аналогично, только подсчёт ведёт от последнего элемента.

    :nth-last-of-type действует аналогично :nth-of-type, только подсчёт ведёт от последнего элемента.

    Разницу между :first-child (см. первый пример Структурных псевдоклассов) и :first-of-type, :last-child и :last-of-type, :only-child и :only-of-type в отображении браузерами я не увидела.

    Языковой псевдокласс

    12 комментариев:

    Светлана Ковалева Спасибо, Наталья, интересные вещи! NMitra Статью еле осилила.) Старалась и наглядно и как-то классифицировать всю эту красоту. ключевой Я новичек, при чем самый самый. При всей раскладке информации понял лишь не много. Куда эти ссылки вставлять в какой период времени или когда? В общем мне нравится эта тема и даже очень. Открыв Блог Hallucinatio в течении месяца ищу, как быть с Adsensee, FeedBurner и т.д., а особенно рекламой.Думаю найти у Вас помощь, а то «тысячники» одолели мой @mail и все без толку, только лишние деньги выкинул, даже попадал на диски с замками (ключ где то в Америке).Наверно такие и зарабатывают на чайниках, но они не учли маркетинговой части этого вопроса. У меня могут быть друзья и знакомые, которые то же ищут эту информацию за денежный эквивалент. В общем спасибо. NMitra Я затрудняюсь в ответе на ваш комментарий. Указанные выше коды — это основы CSS, которые я сама недавно для себя прояснила, а не маркетинговые исследования. Их не обязательно вам изучать сразу. Думаю, сначала стоит систематизировать информацию и убрать нижний скроллинг.

    Откройте сообщения, нажмите вкладку «HTML» и в тело статьи добавьте код. Вместе с тегом style. Сначала потренируйтесь так. Russian Top Blogspot Привет, этот пост попал в Топ каталога Russian Top Blogspot NMitra Спасибо, мне очень приятно Анонимный Добрый день ! не подсажете, может ли один див меняться (например цвет) при наведении на другой ?

    что то вроде того , но это не работает :)
    NMitra Можно, посмотрите ещё тему про селекторы http://shpargalkablog.ru/2011/10/css-selectors.html

    Этот вариант работает, если блоки стоят на одном уровне, тот что вы написали — один блок #delta1 вложен в другой #delta2

    Псевдоклассы и псевдоэлементы в CSS (hover, before, first-child и другие)

    Приветствую Вас, уважаемые читатели блога. Сегодня продолжим тему изучения каскадных таблиц стилей. В одной из предыдущих статей мы рассматривали специальные селекторы в CSS, но рассмотрели только часть из них. И на очереди у нас остались селекторы псевдоклассов и псевдоэлементов.

    Псевдоэлементы

    Псевдоэлементы — разновидность специальных селекторов, привязывающих стиль к определенному фрагменту элемента Web-страницы, а также они могут генерировать содержимое, которого нет в исходном html коде. Таким фрагментом может быть первый символ или первая строка в абзаце.

    Псевдоэлементы используются не сами по себе, а только в совокупности с основными селекторами:

    Вначале следует имя основного селектора, затем пишется двоеточие, после которого идёт имя псевдоэлемента.

    Далее рассмотрим некоторые псевдоэлементы и их свойства.

    :first-letter

    Привязывает стиль к первой букве текста в элементе web-страницы, если ей не предшествует встроенный элемент, не являющийся текстом, например, изображение. Это позволяет создавать в тексте буквицу (увеличенная первая буква, базовая линия которой ниже на одну или несколько строк базовой линии основного текста) и выступающий инициал (увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста).

    Рассмотрим применение first-letter на примере создание выступающего инициала:

    И результат примера:

    Как видно на скриншоте, первая буква абзаца стала в два раза больше и изменила цвет на красный.

    :first-line

    Псевдоэлемент :first-line привязывает стиль к первой строке текста в элементе веб страницы. Посмотрим действие псевдоэлемента :first-line на абзац текста:

    :after и :before

    Псевдоэлементы after и before применяется для вставки контента после и перед содержимым элемента. Эти псевдоэлементы работают совместно со стилевым свойством content, которое определяет содержимое для вставки.

    Как видим в конце каждого абзаца вставлен текст «webcodius.ru», как и прописано в css правиле в свойстве «content». Если в место «after» поставить «before», то текст вставиться в начале абзаца.

    Псевдоклассы

    Псевдоклассы позволяют привязать стиль к элементам веб страницы на основе их состояния и местоположения в дереве элементов. Примером такого состояния может служить гиперссылка, которая меняет свой цвет при наведении на нее курсора мыши.

    При описании css правил псевдоклассы обычно используют в совокупности с основными селекторами:

    Если псевдокласс указывается без селектора впереди (:hover), то он применяется ко всем элементам страницы.

    Псевдоклассы условно делятся на три группы:

    • определяющие состояние элементов;
    • имеющие отношение к дереву элементов;
    • указывающие язык текста.

    Псевдоклассы, определяющие состояние элементов

    Псевдоклассы этой группы определяют состояние элемента html страницы и применяют стиль только для определенного состояния. Обычно псевдоклассы состояний применяются для гиперссылок, но иногда их применяют и для других элементов веб страницы.

    Псевдокласс :link применяется для не посещенных ссылок, т.е. ссылкам, на которые пользователь еще не нажимал. Записи a <. >и a:link <. >в таблице стилей дают одинаковый результат, поэтому псевдокласс :link можно не указывать.

    Псевдокласс :visited определяет внешний вид посещенных ссылок, т.е. ссылок по которым пользователь уже щелкнул. По умолчанию такие ссылки меняют свой цвет на фиолетовый, но с помощью данного псевдокласса цвет и другие параметры можно поменять.

    Псевдокласс :active применяется к активным элементам. Например, для активации ссылки, необходимо навести на нее курсор и щелкнуть мышкой.

    Псевдокласс :focus применяется к элементу при получении фокуса. Например, поле текстового ввода получает фокус, когда в него установлен курсор.

    И последний псевдокласс :hоvеr применяется к элементу, когда на него наведен курсор мыши, но щелчка не происходит.

    Для примера посмотрим как будут выглядеть ссылки в разных состояниях:

    Псевдоклассы структуры документа

    С помощью этой группы псевдоклассов стили привязываются к элементам в зависимости от их положения в структуре документа.

    Первыми рассмотрим псевдоклассы :first-child и :last-child, которые привязывают стиль к элементам селектора, которые являются соответственно первым и последним дочерним элементом своего родителя. Чтобы стало понятней рассмотрим эти псевдоклассы на примере маркированного списка:

    В этом примере с помощью правила CSS «li:first-child» мы говорим браузеру, что стиль необходимо применить к элементу li, который идет первым в своем родительском элементе. А с помощью селектора «li:last-child» элемент должен быть последним. Таким образом, с помощью свойств css для настроек отображения шрифтов, мы указали, что первый элемент списка должен быть выделен жирным шрифтом, а у последнего элемента установили шрифт красного цвета.

    Следующий псевдокласс :only-of-type, который применяется к дочернему элементу указанного типа, только если он единственный у своего родителя.

    В примере псевдокласс : only-of-type применяется к элементу , в правилах стиля которого размер шрифта увеличивается в два раза. Размер шрифта увеличивается только у тех гиперссылок, которые у своих родителей (в данном случае это тег

    ) встречаются только один раз.

    Псевдокласс :nth-child позволяет привязать стиль к элементам Web-страницы, на основе их нумерации в дереве элементов:

    После имени данного псевдокласса в скобках может быть указано четыре возможных варианта:

    • odd — стиль будет привязан ко всем нечетным элементам удовлетворяющих значению ;
    • even — означает все четные элементы;
    • число — обозначает порядковый номер дочернего элемента относительно своего родителя (нумерация начинается с 1 — обозначает первый элемент);
    • выражение — задается в виде формулы an+b, где a и b целые числа, а n счетчик, который принимает значения 0, 1, 2.

    Например, как выделить все четные строки таблицы цветом? В этом случае идеально поможет псевдокласс :nth-child:

    В коде примера запись tr:nth-child (2n) означает, что стиль необходимо привязать ко всем элементам tr, с помощью которых формируются строки таблицы (об этом мы говорили в статье как вставить таблицу на html-странице). Причем порядковый номер строк относительно родительского элемента table должен удовлетворять формуле 2n, в которую браузер вместо n подставляет целые числа 0, 1, 2. В итоге получается, что стиль применяется к строкам под номерами 2, 4, 6 и т.д.

    Псевдоклассы :not и *

    Осталось рассмотреть еще два важных псевдокласса. Особый псевдокласс :not позволяет привязать стиль к любому элементу web страницы, не удовлетворяющему заданным условиям. Таким условием может быть любой селектор:

    Стиль будет привязан к элементам веб страницы, удовлетворяющим основному селектору и не удовлетворяющему селектору выбора. Например:

    В результате этого css правила, текст всех заголовков h1 окрасятся в красный цвет, кроме того у которого атрибут id будет равен main.

    И последний на сегодня псевдокласс * («звездочка»), который обозначает любой элемент html страницы. Он может потребоваться в случае, если необходимо установить одновременно один стиль для всех элементов веб-страницы, например, задать шрифт или начертание текста. Синтаксис:

    Например, чтобы установить размер текста для всех элементов документа можно использовать следующее правило css:

    На этом все, до новых встреч на страницах блога!

    Псевдоклассы CSS

    Псевдоклассы CSS позволяют изменять динамическое состояние элемента веб страницы. В качестве динамического состояния может выступать нажатие на элемент, наведение курсора и тп.

    Внешний вид элементов изменяется с помощью селекторов. Но что если вам необходимо в таблице изменить все четные строки. То есть добавить цветную заливку или изменить в них цвет текста. Можно прописать класс для каждой четной строки вручную, но это займет время и увеличит размер страницы. Простым решением будет использовать псевдокласс :nth-child(even) для селектора tr.

    color:green;

    Этот код сделает цвет текста во всех четных строках таблицы на зеленый.

    Кроме этого в процессе взаимодействия пользователя со страницей возникают динамические состояния. К примеру когда посетитель наводит указатель мыши на элемент Ссылка возникает его динамическое состояние a:hover. А когда пользователь нажимает на элемент то возникает динамическое состояние a:visited.

    Псевдоклассы CSS бывают следующих видов:

    1. Динамические.
    2. Псевдоклассы пользовательского интерфейса.
    3. Структурные псевдоклассы.
    4. Целевой псевдокласс :target.
    5. Языковой псевдокласс :lang().
    6. Псевдокласс отрицания :not().
    7. Комбинация псевдоклассов.
    Динамические псевдоклассы

    В большинстве случаев применяются к ссылкам на странице. Но так же могут применяться к другим элементам веб страницы. Динамических псевдоклассов несколько. Каждый отвечает за свою динамическую характеристику элемента.

    :link — Стиль применяется к непосещенным ссылка;

    :visited — Стиль применяется к ссылке которую вы уже посетили на странице;

    :focus — Применение стиля к ссылкам, или элементам, которые были активированы курсором или же с помощью клавиатуры (клавишой TAB). Чаще всего используется для элементов форм;

    :hover — используется для применения стилей к элементами на которые наведен курсор мыши;

    :active — выбирается элемент страницы на который было произведено нажатие мыши. Применяется как к ссылкам так и другим элементам веб страницы.

    Псевдоклассы CSS для пользовательского интерфейса

    Псевдоклассы данного типа применяются к элементам форм, которым заданы определенные атрибуты.

    :disabled — стили для заблокированных к изменению элементов форм;

    :enabled — противоположный предыдущему, применяет стили к не заблокированным элементам формы;

    :checked — стилизация таких элементов как: , , а также элементов , находящихся внутри элемента ;

    :indeterminate — применяется к элементам формы таким как радио и чекбокс. Такие элементы формы могут находиться в неопределенном состоянии. Именно к таким и применяются стили.

    Структурные псевдоклассы CSS

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

    :root — выбор элемента, который является корневым в документе;

    :nth-child() — элементы на основе их индекса (в порядке очереди) внутри их родительского контейнера. Варианты:
    li:nth-child(even) — каждый элемент списка с индексом 2, 4, 6, 8, и т.д.
    li:nth-child(odd) — каждый элемент списка с индексом 1, 3, 5, 7, и т.д.
    li:nth-child(3) — только элемент с индексом 3.
    li:nth-child(an+b) — например, li:nth-child(3n+1) выберет первый (3*0 +1 = 1), четвёртый (3*1 +1 = 4), седьмой (3*2 +1 = 7) элементы и т.д., причём значение b может быть равно нулю;

    :nth-last-child() — дочерние элементы на основе их индекса внутри контейнера, при этом отсчёт идёт в обратном порядке, т.е. начиная с последнего элемента. Значениями аргумента могут быть положительные, отрицательные значения, а также ключевые слова even odd ;

    :nth-of-type() — элементы одного типа на основе их индекса внутри контейнера, например, img:nth-of-type(2n) установит обтекание по левому краю каждой четной картинке, при условии, что они каждая из них не обёрнута другим блоком;

    :nth-last-of-type() — элементы одного типа на основе их индекса внутри контейнера, начиная с последнего элемента к первому;

    :first-child — элемент, который является первым дочерним элементом некоторого другого элемента;

    :last-child — последний дочерний элемент элемента-контейнера;

    :first-of-type — первый элемент данного типа среди дочерних элементов родительского элемента-контейнера;

    :last-of-type — последний элемент данного типа среди дочерних элементов родительского элемента-контейнера;

    :only-child — дочерний элемент, который является единственным дочерним элементов. Работает аналогично с :first-child:last-child или :nth-child(1):nth-last-child(1) , но с меньшей специфичностью;

    :only-of-type — элемент, который является единственным элементом данного типа в родительском элементе;

    :empty — элемент, который не содержит ни одного дочернего элемента.

    Целевой псевдокласс

    Некоторые ссылки указывают на местоположение внутри ресурса. Этот тип ссылок заканчивается символом «решетка» # , за которым следует идентификатор якоря (так называемый идентификатор фрагмента), например https://web-legko.ru/css3/#content . Элемент с идентификатором фрагмента называется целевым элементом. С помощью данного псевдокласса можно стилизовать элемент, к которому перешли по ссылке на странице (навигация по странице), а также элементы, которые расположены в одном блоке и при нажатии на кнопку/ссылку сменяются/перемещаются (например, css-слайдер).

    В данном примере каждой картинке задан id , а каждой ссылке — соответствующий идентификатор якоря. При нажатии на ссылку каждая картинка увеличивается до стопроцентного размера.

    Языковой псевдокласс

    Данный псевдокласс используется когда в документе содержатся абзацы текста на разных языках. Чтобы браузер различал их, элементу с текстом добавляется атрибут lang с кодом языка, например, lang=»fr» . В результате чего этот элемент может быть стилизован при помощи селектора p:lang(fr) .

    Псевдокласс отрицания

    Функциональный селектор псевдокласса, который принимает в качестве значения простой селектор, а затем отбирает элементы, которые не содержат указанное значение аргумента. Значениями аргументов могут быть только следующие селекторы:

    • элемента, например, body :not(strong)
    • класса и идентификатора, например, p:not(.text)
    • псевдокласса, например, ul:not(:first-child)
    • атрибута, например, input:not([type=»checkbox»])
    Комбинации псевдоклассов

    При стилизации элементов возможна комбинация псевдоклассов CSS, например:

    tr:nth-last-child(even):hover — добавит стили при наведении каждой чётной строке таблицы (отсчёт в обратном порядке);

    h2:not(:first-of-type):not(:last-of-type) — добавит стили для всех элементов данного типа, кроме первого и последнего элемента данного типа.

    Илон Маск рекомендует:  Что такое код gets
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL