CSS ОСНОВЫ: псевдокласс vs псевдоэлемент 🤼‍♀️ #css #css3 #javascript #js #learning #course #shorts

Я часто вижу такой CSS код :after { … }, :before { … }. Браузер знает, что вы хотели псевдоэлемент с синтаксисом псевдокласса. Но в чем между ними разница?

Псевдоэлемент — это слово, добавляемое к селектору, и нужное для стилизации части элемента или добавления доп контента. Например ::first-line изменяет шрифт первой строки абзаца, а ::before и ::after вставляют дополнительный контент.

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

Здесь вы видите список стандартных псевдоэлементов:
::after, ::before, ::backdrop, ::cue, ::file-selector-button, ::first-line, ::grammar-error, ::highlight(), ::marker, ::part(), ::placeholder, ::selection, ::slotted(), ::spelling-error, ::target-text, ::view-transition, ::view-transition-group, ::view-transition-image-pair, ::view-transition-new, ::view-transition-old.

Как видите список не маленький, а есть еще и нестандартные:

для Mozilla ::-moz-color-swatch, ::-moz-focus-inner, ::-moz-list-bullet, ::-moz-list-number, ::-moz-meter-bar, ::-moz-progress-bar, ::-moz-range-progress, ::-moz-range-thumb, ::-moz-range-track.
И для всех остальных ::-webkit-inner-spin-button, ::-webkit-meter-bar, ::-webkit-meter-even-less-good-value, ::-webkit-meter-inner-element, ::-webkit-meter-optimum-value, ::-webkit-meter-suboptimum-value, ::-webkit-progress-bar, ::-webkit-progress-inner-element, ::-webkit-progress-value, ::-webkit-scrollbar, ::-webkit-search-cancel-button, ::-webkit-search-results-button, ::-webkit-slider-runnable-track, ::-webkit-slider-thumb.

А это список стандартных псевдоклассов:
:active, :any-link, :autofill, :blank, :buffering, :checked, :default, :defined, :dir(), :disabled, :empty, :enabled, :first, :first-child, :first-of-type, :focus, :focus-visible, :focus-within, :fullscreen, :future, :has(), :host, :host-context(), :host(), :hover, :in-range, :indeterminate, :invalid, :is(), :lang(), :last-child, :last-of-type, :left, :link, :local-link, :modal, :muted, :not(), :nth-child, :nth-last-child, :nth-last-of-type(), :nth-of-type, :only-child, :only-of-type, :optional, :out-of-range, :past, :paused, :picture-in-picture, :placeholder-shown, :playing, :popover-open, :read-only, :read-write, :required, :right, :root, :scope, :seeking, :stalled, :state(), :target, :target-within, :user-invalid, :user-valid, :valid, :visited, :volume-locked, :where().

Сказать что их много - ничего не сказать.

И список нестандартных:
:-moz-drag-over, :-moz-first-node, :-moz-last-node, :-moz-loading, :blank, :-moz-window-inactive.

#css #css3 #js #javascript #frontend #html #web #webdevelopment #htmlcss #html5 #csshtml #css3html5 #css3code #css3tutorial #htmltutorial #htmlelements #csscourse #csstutorialscool #csstricks #csshovereffect #csshover #csshovereffects #webdev #cssanimation #csstransition #csstricks #htmlcss3 #fullstack #cssamazing #cssfeatures #csseasy #cssbasic #csslesson #csscourse #cssteach #vue #react #angular #svelte #vanillajs #animation #cssawesome #learncss #course #programming #crash_course #learning #fariga

Подписывайтесь на меня в соц. сетях: