March 1Mar 1 Administrators CSS Pseudo-classes Reference CSS Pseudo-classes A CSS pseudo-class is a keyword that can be added to a selector, to define a style for a special state of an element. Some common use for pseudo-classes: Style an element when a user moves the mouse over it Style visited and unvisited links differently Style an element when it gets focus Style valid/invalid/required/optional form elements Style an element that is the first child of its parent Syntax Pseudo-classes are always denoted by a single colon (:) followed by the pseudo-class name: selector:pseudo-class-name { CSS properties} The table below lists all the pseudo-class keywords in CSS: Pseudo-class Examples Example description :active a:active Selects the active link :any-link a:anylinkarea:anylink Selects any <a> or <area> element with an href attribute :auto-fill input:autofill Selects any <input> element with its value autofilled by the browser :checked input:checkedoption:checked Matches any <input> or <option> element that is checked :default input:defaultbutton:defaultoption:default Selects form elements that are default in a group of related elements :defined :defined Selects any element that has been defined (standard or custom elements) :dir() :dir(ltr):dir(rtl) Selects any element with the specified text direction :disabled :disabledinput:disabledoption:disabled Selects any element that is disabled. Most used for form elements :empty div:empty Selects any element that has no children (including text nodes) :enabled :enabledinput:enabled Selects any element that is enabled. Most used for form elements :first @page :first Represents the first page of a printed document (used with the @page rule) :first-child p:first-childli:first-child Selects the element that is the first child of its parent (among a group of sibling elements) :first-of-type p:first-of-typeli:first-of-type Selects the first element of its type among a group of sibling elements :focus input:focusselect:focus Selects the element that gets focus. Most used for form elements :focus-visible button:focus-visible Selects the element that gets focus (used to apply focus styles only when the keyboard is used to focus something, not the mouse) :focus-within form:focus-withinlabel:focus-within Matches an element if the element or any of its descendants gets focus :fullscreen :fullscreen Selects any element that is currently in full-screen mode :has() h2:has(+p) Selects h2 elements that are immediately followed by a p element, and applies the style to h2 :hover a:hoverp:hover Selects element on mouse over :in-range input:in-range Select any <input> element with a value within the specified range limit :indeterminate input:indeterminate Selects any form element that is in an indeterminate state :invalid input:invalidfieldset:invalid Selects invalid form elements :is() :is(ul, ol) Selects all <ul> and <ol>elements :lang() p:lang(it) Selects any <p> element with a lang attribute equal to "it" (Italian) :last-child li:last-child Selects any <li> element that is the last child of its parent :last-of-type p:last-of-type Selects any <p> element that is the last <p> element of its parent :left @page :left Represents all left-hand pages of a printed document (used with the @page rule) :link a:link Selects any unvisited link :modal :modal Selects the element that is in a modal state :not() :not(p) Selects any element that is not a <p> element :nth-child() p:nth-child(2) Selects any <p> element that is the second child of its parent :nth-last-child() p:nth-last-child(2) Selects any <p> element that is the second child of its parent, counting from the end :nth-last-of-type() p:nth-last-of-type(2) Selects any <p> element that is the second <p> element of its parent, counting from the end :nth-of-type() p:nth-of-type(2) Selects any <p> element that is the second <p> element of its parent :only-child p:only-child Selects any <p> element that is the only child of its parent :only-of-type p:only-of-type Selects any <p> element that is the only <p> element of its parent :optional input:optionalselect:optionaltextarea:optional Selects any <input>, <select>, or <textarea> elements without a "required" attribute :out-of-range input:out-of-range Selects any <input> element with a value outside the specified range limit :placeholder-shown input:placeholder-shown textarea:placeholder-shown Selects any <input> or <textarea> element that is currently displaying placeholder text :popover-open :popover-open Selects any element that is in a showing popover state :read-only input:read-only Selects input elements with the "readonly" attribute specified :read-write input:read-write Selects editable input elements :required input:required Selects input elements with the "required" attribute specified :right @page :right Represents all right-hand pages of a printed document (used with the @page rule) :root :root Selects the document's root element :scope :scope Selects elements that are a reference point, or scope, for selectors to match against :state() :state() Selects custom elements that have the specified custom state :target :target Selects the current active target element :user-invalid :user-invalid Selects any form element with an invalid value (after the user have interacted with it) :user-valid :user-valid Selects any form element with a valid value (after the user have interacted with it) :valid input:valid Selects all input elements with a valid value :visited a:visitedarea:visited Selects all visited links :where() :where(ol, ul) Selects all <ul> and <ol>elements ★ +1 Sign in to track progress
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.