Что такое псевдокласс в css
Перейти к содержимому

Что такое псевдокласс в css

  • автор:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

div:hover  background-color: #f89b4d; > 

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

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

Синтаксис

selector:pseudo-class

Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.

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

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

Specification
HTML Standard
# pseudo-classes
Selectors Level 4
CSS Basic User Interface Module Level 4

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

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

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

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

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

Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено».

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

Применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов.

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

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

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

Применяет стиль к заблокированным элементам форм.

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

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

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

Используется для применения стиля к доступным (не заблокированным) элементам форм.

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

Задаёт стилевое оформление для первого дочернего элемента в группе братских элементов.

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

Задаёт правила стилей для первого элемента определённого типа в группе братских элементов.

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

Определяет стиль для элемента, получающего фокус.

Псевдокласс :focus-within

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

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

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

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

Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент ещё не активирован.

Псевдокласс :in-range

Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.

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

Задаёт стиль для элементов форм, таким как флажки и переключатели, когда они находятся в неопределённом состоянии.

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

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

Псевдокласс :is()

Псевдокласс :is() позволяет писать комбинированные селекторы в более краткой и наглядной форме.

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

Определяет язык, который используется в документе или его фрагменте.

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

Задаёт стилевое оформление последнего дочернего элемента в группе братских элементов.

Псевдокласс :last-of-type

Задаёт правила стилей для последнего элемента определённого типа в группе братских элементов.

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

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

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

Псевдокласс :muted применяется к аудио и видео-элементам, когда у них отключен звук.

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

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

Псевдокласс :nth-child()

Используется для добавления стиля к элементам на основе нумерации в дереве элементов.

Псевдокласс :nth-last-child()

Используется для добавления стиля к элементам на основе нумерации в дереве элементов, отсчёт ведётся с конца.

Псевдокласс :nth-last-of-type()

Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов, отсчёт ведётся от последнего элемента.

Псевдокласс :nth-of-type()

Используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.

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

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

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

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

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

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

Псевдокласс :out-of-range

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

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

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

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

Определяет стиль элемента <input> или <textarea>, который в данный момент отображает текст подсказки, заданной атрибутом placeholder.

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

Псевдокласс :playing применяется к аудио и видео-элементам, когда происходит их проигрывание.

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

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

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

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

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

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

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

Псевдокласс :seeking применяется к аудио и видео-элементам, когда в проигрывателе на шкале времени ищется определённая позиция.

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

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

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

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

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

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

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

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

Псевдокласс :volume-locked

Псевдокласс :volume-locked применяется к аудио и видео-элементам, когда громкость звука «заблокирована» пользователем.

Справочник CSS

  • !important
  • ::after
  • ::backdrop
  • ::before
  • ::first-letter
  • ::first-line
  • ::marker
  • ::placeholder
  • ::selection
  • :active
  • :blank
  • :buffering
  • :checked
  • :default
  • :dir
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :focus-within
  • :fullscreen
  • :hover
  • :in-range
  • :indeterminate
  • :invalid
  • :is()
  • :lang()
  • :last-child
  • :last-of-type
  • :link
  • :muted
  • :not()
  • :nth-child()
  • :nth-last-child()
  • :nth-last-of-type()
  • :nth-of-type()
  • :only-child
  • :only-of-type
  • :optional
  • :out-of-range
  • :paused
  • :placeholder-shown
  • :playing
  • :read-only
  • :read-write
  • :required
  • :root
  • :seeking
  • :stalled
  • :target
  • :valid
  • :visited
  • :volume-locked
  • @charset
  • @document
  • @font-face
  • @import
  • @keyframes
  • @media
  • @page
  • @supports
  • @viewport
  • accent-color
  • align-content
  • align-items
  • align-self
  • all
  • animation
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function
  • aspect-ratio
  • backdrop-filter
  • backface-visibility
  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size
  • block-size
  • border
  • border-block
  • border-block-color
  • border-block-end
  • border-block-end-color
  • border-block-end-style
  • border-block-end-width
  • border-block-start
  • border-block-start-color
  • border-block-start-style
  • border-block-start-width
  • border-block-style
  • border-block-width
  • border-bottom
  • border-bottom-color
  • border-bottom-left-radius
  • border-bottom-right-radius
  • border-bottom-style
  • border-bottom-width
  • border-collapse
  • border-color
  • border-end-end-radius
  • border-end-start-radius
  • border-image
  • border-left
  • border-left-color
  • border-left-style
  • border-left-width
  • border-radius
  • border-right
  • border-right-color
  • border-right-style
  • border-right-width
  • border-spacing
  • border-start-end-radius
  • border-start-start-radius
  • border-style
  • border-top
  • border-top-color
  • border-top-left-radius
  • border-top-right-radius
  • border-top-style
  • border-top-width
  • border-width
  • bottom
  • box-decoration-break
  • box-shadow
  • box-sizing
  • caption-side
  • caret-color
  • clear
  • clip
  • color
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • column-span
  • column-width
  • columns
  • content
  • counter-increment
  • counter-reset
  • cursor
  • direction
  • display
  • empty-cells
  • filter
  • flex
  • flex-basis
  • flex-direction
  • flex-flow
  • flex-grow
  • flex-shrink
  • flex-wrap
  • float
  • font
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant
  • font-weight
  • gap
  • height
  • hyphenate-character
  • hyphenate-limit-chars
  • hyphens
  • image-rendering
  • justify-content
  • left
  • letter-spacing
  • line-clamp
  • line-height
  • list-style
  • list-style-image
  • list-style-position
  • list-style-type
  • margin
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
  • marks
  • max-height
  • max-width
  • min-block-size
  • min-height
  • min-width
  • mix-blend-mode
  • object-fit
  • opacity
  • order
  • orphans
  • outline
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • overflow
  • overflow-x
  • overflow-y
  • padding
  • padding-block
  • padding-block-end
  • padding-block-start
  • padding-bottom
  • padding-inline
  • padding-inline-end
  • padding-inline-start
  • padding-left
  • padding-right
  • padding-top
  • page-break-after
  • page-break-before
  • page-break-inside
  • perspective
  • perspective-origin
  • place-content
  • pointer-events
  • position
  • quotes
  • resize
  • right
  • row-gap
  • scroll-behavior
  • tab-size
  • table-layout
  • text-align
  • text-align-last
  • text-decoration
  • text-decoration-color
  • text-decoration-line
  • text-decoration-skip-ink
  • text-decoration-style
  • text-emphasis
  • text-emphasis-color
  • text-emphasis-position
  • text-emphasis-style
  • text-fill-color
  • text-indent
  • text-orientation
  • text-overflow
  • text-shadow
  • text-stroke
  • text-stroke-color
  • text-stroke-width
  • text-transform
  • top
  • transform
  • transform-origin
  • transform-style
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function
  • unicode-bidi
  • user-select
  • vertical-align
  • visibility
  • white-space
  • widows
  • width
  • word-break
  • word-spacing
  • word-wrap
  • writing-mode
  • z-index
  • zoom

Что такое псевдоклассы и псевдоэлементы в CSS.

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

images

Как правило, все стили CSS , которые мы привыкли использовать, применяются для элементов, которые можно обнаружить в дереве (структуре) документа. С ними все понятно их можно увидеть в исходном коде документа и с ними можно взаимодействовать.

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

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

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

Как получить доступ к таким элементам на странице?

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

Псевдоклассы – это селекторы, которые определяют состояние уже существующих элементов, которое может меняться при определенных условиях.

Псевдоэлементы – это селекторы, которые определяют область элементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS .

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

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

Для составления этого списка использовались материалы этой страницы страндарта:

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

В разделе 4.2. Selector Index приводится официальная таблица.

Итак, список псевдоклассов:

E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:first-child E:last-child E:first-of-type E:last-of-type E:only-child E:only-of-type E:empty E:link E:visited E:active E:hover E:focus E:target E:lang(fr) E:enabled E:disabled E:checked E:not(s)

Псевдоэлементов намного меньше, вот их список:

E::first-line E::first-letter E::before E::after

Здесь, E — элемент, к которому применяется селектор.

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

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

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

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