Как пользоваться псевдоклассами в css
Перейти к содержимому

Как пользоваться псевдоклассами в css

  • автор:

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

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

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

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

Наведи сюда мышь

Синтаксис

Декларация селектора с псевдоклассом имеет следующий синтаксис:

 селектор:псевдокласс

Т.е. псевдокласс ставится после селектора и отделяется от него двоеточием.

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

Ссылки могут отображаться разными способами.

Есть четыре псевдокласса ссылки:

  • :link — обычная, не посещенная ссылка
  • :visited — ссылка, которую пользователь уже посетил
  • :hover — ссылка, на которую наведен курсор мыши
  • :active — ссылка в момент нажатия
 a:link < color: blue; >a:visited < color: purple; >a:active < color: red; >a:hover

Примечание: Чтобы CSS определения состояния ссылки были эффективными, необходимо соблюдать некоторые правила: a:hover должна стоять после a:link и a:visited , а a:active должна стоять после a:hover !

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

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

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

Псевдоклассы можно комбинировать с HTML классами:

 a.highlight:hover

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

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

В следующем примере псевдокласс :hover используется с элементом :

 div:hover

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

Простая появляющаяcя подсказка

Пример простой появляющейся подсказки. При наведении на элемент отображается элемент

:

Наведите сюда, чтобы показать элемент

.

 p < display: none; background-color: yellow; padding: 20px; >div:hover p

Псевдокласс :first-child

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

В следующем примере селектор соответствует любому элементу

, который является первым дочерним элементом любого элемента:

 p:first-child

В следующем примере селектор соответствует первому элементу внутри всех элементов

:

 p i:first-child

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

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

 p:first-child i

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

Псевдокласс :lang позволяет определять особые правила для разных языков.

В следующем примере :lang определяет цитатные символы для элемента с атрибутом lang=»no»:

    q:lang(no) 

Какой-то текст Такая-то цитата Какой-то текст.

Другие псевдоклассы

Кроме описанных существуют и другие псевдоклассы, которые могут оказаться весьма полезны при определении стилей HTML элементов:

Псевдокласс Пример Описание
:checked input:checked Выбирает каждый элемент со статусом «включен» (с атрибутом checked)
:disabled input:disabled Выбирает каждый заблокированный элемент (с атрибутом disabled)
:empty p:empty Выбирает все заданные элементы, у которых нет дочерних элементов
:enabled input:enabled Выбирает все доступные элементы
:first-of-type p:first-of-type Выбирает каждый элемент, который является первым дочерним заданным элементом своего родителя
:focus input:focus Выбирает элемент, на который переведен фокус
:in-range input:in-range Выбирает элемент со значением в заданном диапазоне
:invalid input:invalid Выбирает все элементы , значение которых не соответствует указанному типу
:last-child p:last-child Выбирает каждый элемент, который является последним дочерним элементом своего родителя
:last-of-type p:last-of-type Выбирает каждый элемент, который является последним дочерним заданным элементом своего родителя
:not(селектор) :not(p) Выбирает каждый элемент, который не является указанным элементом
:nth-child(n) p:nth-child(2) Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя
:nth-last-child(n) p:nth-last-child(2) Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя, считая от последнего дочернего элемента
:nth-last-of-type(n) p:nth-last-of-type(2) Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя, считая от последнего дочернего элемента
:nth-of-type(n) p:nth-of-type(2) Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя
:only-of-type p:only-of-type Выбирает каждый элемент, который является единственным элементом такого типа у своего родителя
:only-child p:only-child Выбирает каждый элемент, который является единственным дочерним элементом у своего родителя
:optional input:optional Выбирает элементы формы без атрибута «required»
:out-of-range input:out-of-range Выбирает элементы , значения которых выходят за пределы заданного диапазона
:read-only input:read-only Выбирает элементы формы с атрибутом «readonly»
:read-write input:read-write Выбирает элементы формы без атрибута «readonly»
:required input:required Выбирает элементы формы с атрибутом «required»
:root root Выбирает корневой элемент документа
:target #news:target Выбирает текущий активный элемент (у которого было нажато на URL, содержащее это имя анкора)
:valid input:valid Выбирает все элементы с вылидным значением

Как пользоваться псевдоклассами в css

Основная задача селектора — выбор всех элементов из структуры документа подпадающих под определенные характеристики. В нашем случае состояние которых соответствует спецификации определенных псевдоклассов. Задается он как двуеточие поле которого идет название применяемого псевдокласса. Так, для изменения цвета фона кнопки отправки формы при наведении мыши мы будем использовать следующую конструкцию:

.formSubmit:hover  background-color: #999; >

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

li:first-child:hover  font-size: 22px; >

Подобные приемы в работе с CSS позволяют сократить html код и уменьшить время на верстку страницы в целом.

Классификация псевдоклассов CSS

Динамические псевдоклассы
  • :hover — выделяет элемент на который наведен курсор мыши.
  • :active — применяется для активного элемента. Активным считается элемент во время клика. Обычно используется для изменения цвета ссылки при клике по ней.
  • :focus — выделяет элемент на котором установлен фокус ( к примеру курсор в текстовом поле формы).
Псевдоклассы ссылок
  • :link — выделяет ссылки, которые еще не были посещены пользователем.
  • :visited — задает оформление ссылкам посещенным пользователем.
Псевдоклассы форм
  • :read-only — выделяет элемент формы у которого присутствует атрибут readonly (запрещает изменение или выбор данного элемента формы). Мы можем сделать такие поля к примеру полупрозрачными, чтобы у пользователей не возникало желания кликнуть на них.
  • :read-write — обратный :read-only селектор. Применится к элементам доступным для выбора и изменения.
  • :disabled — применяется для форматирования элементов форм с атрибутом disabled (запрещает нажатие, выделение и тд элементов формы). Схож с предыдущим классом.
  • :enabled — антипод :disabled. Выберет все доступные для воздействия элементы формы. По умолчанию доступны все элементы. Недоступными они становятся только после прописывания у них атрибута disabled.
  • ::-moz-placeholder — применяется к элементам формы с атрибутом placeholder. Работает в браузере firefox и позволяет изменять внешний вид текста (шрифт, цвет и тд)
  • ::-webkit-input-placeholder — аналогичен предыдущему псевдоклассу, только на этот раз работает в crome и safari.
  • :checked — применяется к полям типа checkbox (переключателям) и radio (флажкам) для обозначения их включенного состояния.
  • :indeterminate — псевдокласс обратный :checked. Оформляет флажки и переключатели в неактивном состоянии.
  • :required — выберет элементы с атрибутом required (делает поле обязательным для заполнения перед отправкой формы)
  • :optional — обратный :required селектор. Выберет все элементы не обязательные для заполнения.
  • :root – выбирает корневой тег документа. Соответствует тегу html.
  • :valid – после заполнения поля формы, если содержимое соответствует типу, который должен быть введен в поле (к примеру в поле с type=»number» введен номер), то считается, что поле прошло проверку на валидность данных. К такому полю и будет применен данный селектор.
  • :invalid — обратный :valid селектор. Применяется если поле не прошло проверку на валидность (к примеру в поле с type=»number» введен текст).
В зависимости от расположения элемента
  • :first-child – применится к первому дочернему элементу тега. Можно использовать к примеру для нестандартного оформления первого пункта списка.
  • :last-child – элемент оформления обратный :first-child. Применяется к последнему дочернему элементу тега.
  • :nth-child(значение) — добавит стиль дочерним элементам с определенным номером (согласно нумерации дерева элементов). Возможные значения: число — определенный номер элемента; odd — все нечетные элементы; even — все четные элементы; выражение по типу an + b, где a и b целые числа, а n счетчик изменяющий свой номер от 0 до бесконечности.
  • :nth-last-child(значение) — различие с предыдущим псевдоклассом заключается только в том, что нумерация происходит не от первого, а от последнего элемента.
  • :only-child — выберет дочерний элемент родителя только при условии, что он у него один.
  • :first-of-type – выбирает первый элемент заданного типа (к примеру одинаковые теги) относящийся к одному родителю. Попробую пояснить — тег td является дочерним для tr. При применении данного псевдокласса к td все первые ячейки в рядках изменят свое оформление.
  • :last-of-type – псевдокласс обратный :first-of-type — послдений элемент заданного типа относящийся к одному родителю.
  • :nth-of-type(значение) – по аналогии с :first-of-type добавит стиль дочерним элементам определенного типа относящимся к одному родителю с определенным номером (согласно нумерации дерева элементов). Возможные значения: число — определенный номер элемента; odd — все нечетные элементы; even — все четные элементы; выражение по типу an + b, где a и b целые числа, а n счетчик изменяющий свой номер от 0 до бесконечности.
  • :nth-last-of-type(значение) – от :nth-of-type отличается только тем, что нумерация элементов идет не с конца, а с начала.
  • :only-of-type — выберет дочерний элемент родителя заданного типа, только если он у него один.
Прочие
  • :empty – выделяет все пустые элементы. Пустым считается элемент в котором ничего нет. К примеру — пустой элемент, а [ / code ] ] , [ [ code ] ] < span >& nbsp ; и тд уже нет.
  • :lang(язык) – выбирает элементы по языку используемому в них. Использутеся для создания различий при выводе различных языков в документе. Как пример- разных кавычек в текстах на разных языках.Язык задается в виде аббревиатуры из английских букв (по типуru, en, fr, it). Источником информации о языке служат метатег content-language и атрибут lang.
  • :not(селектор) — задает оформление для всех элементов не содержащих определенный селектор.
  • :target — изменит оформление идентификатора заданного в адресной строке браузера (происходит при переходе по ссылке с якорем в документе по примеру http://ваш_сайт/#target)

Подводя итоги

Используя псевдоклассы CSS мы можем делать наши сайты значительно динамичнее и выводить юзабилити (удобство пользования сайтом) на принципиально новый уровень. Это становится лишним бонусом для улучшении поведенческих факторов пользователей на сайте в дальнейшем (помогает в продвижении сайта в поисковых системах) да и просто крайне благоприятно складывается на внешнем виде сайта.

Создание псевдоклассов в CSS

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

Примечание: Найти все мануалы этой серии можно по тегу CSS-practice

Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.

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

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

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

Требования

Чтобы следовать этому мануалу, нужно подготовит среду по мануалу Подготовка проекта CSS и HTML с помощью Visual Studio Code.

Создание псевдокласса в CSS

Давайте попробуем создать псевдокласс и посмотрим, как он работает. Для начала убедитесь, что вы настроили все необходимые файлы и папки, как описано в одном из первых руководств этой серии (Подготовка проекта CSS и HTML с помощью Visual Studio Code).

Удалите весь текущий контент из файла styles.css (если из предыдущих мануалов в нем остался код) и добавьте следующий псевдокласс:

img :hover border: 10px solid red;
>

В этом фрагменте кода вы добавили выделенный псевдокласс :hover в селектор тега . Сохраните файл и перейдите в файл index.html. В нем сотрите все (кроме первой строки кода: ). Затем добавьте следующий фрагмент HTML-кода в index.html:

Обратите внимание, для удобства мы используем изображение, размещенное в Интернете. Вы также можете использовать другое изображение, размещенное на вашей машине, указав путь к файлу, как описано в мануале Добавление изображения на веб-страницу с помощью HTML.

Сохраните файл index.html и перезагрузите его в браузере. Если вы не знаете, как просматривать оффлайн-файл HTML, пожалуйста, обратитесь к нашему мануалу по работе с HTML-элементами (раздел «Просмотр оффлайн HTML-файла в браузере»).

На экране будет ваше изображение (мы используем тут наш логотип):

Попробуйте навести курсор на изображение. При перемещении курсора по изображению вокруг него должна появиться сплошная красная рамка шириной 10 пикселей.

Ваш браузер автоматически применяет псевдокласс hover, когда курсор взаимодействует с элементом img – это делается на основе правила, которое вы добавили в файл styles.css.

Вы также можете использовать псевдокласс hover с текстовыми элементами. Если вы хотите попробовать применить :hover к текстовому элементу, сотрите все в файле styles.css и добавьте в документ указанный ниже псевдокласс:

p:hover font-size:100px;
color:red;
>

Сохраните файл styles.css. Вернитесь в файл index.html, удалите все (кроме первой строки: ) и добавьте следующий фрагмент кода:

Сохраните файл и загрузите его в браузере, чтобы проверить результаты. Вы должны получить страницу с текстом «Some text»:

который меняет цвет и размер, когда вы наводите на него курсор:

Заключение

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

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

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

Определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу .

Псевдокласс ::-webkit-input-placeholder

Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Chrome.

Псевдокласс ::-moz-placeholder

Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Firefox.

Псевдокласс :read-write

Применяется к полям формы, доступных для изменения.

Псевдокласс :read-only

Применяется к полям формы, у которых задан атрибут readonly .

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

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

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

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

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

Применяется к полям формы, содержимое которых не соответствует указанному типу.

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *