Loading Please Wait...
Pseudo selectors allow us to select HTML elements based on the state and entity information of the element that is not included in the HTML DOM tree
A pseudo class is a keyword that defines a state of the selected element. For example, hover class represent the state when user hover mouse over the elements like buttons, links, etc.
It is defined by the colon (:) followed by pseudo-class name. Function pseudo class selectors are defined by the colon (:) followed by pseudo-class name and then parenthesis ().
Syntax = :pseudo-class or :pseudo-class()
/* All link elements. */
a{
color: green;
}
/* All link elements when user point the mouse over it. */
a:hover{
color: brown;
}
The :active pseudo class represent the state when element is activated such as links, buttons. The "activation" start by clicking primary mouse button and completed when user release the mouse button
The :any-link pseudo class represent the elements that has an
The :autofill pseudo class represent the input elements that is filled by the suggestions.
The :blank pseudo class represent the input elements that is empty. Check for browser compatibility while using it.
The :checked pseudo class represent the radio, checkbox, and sometime option elements that is selected.
The :current() pseudo class represent the elements or ancestor that is currently being displayed. Check for browser compatibility while using it. For example, :current(div, p)
The :default pseudo class represent the form elements in a group (radio, checkbox, option) with default value (sometime first one).
The :defined pseudo class represent the standard element (built-in) or custom element that is successfully defined with CustomElementRegistry.define() method.
The :dir() pseudo class represent the elements with text direction utility. Check for browser compatibility while using it. For example, :dir(rtl)
The :disabled pseudo class represent the element that is disabled such as input text, selection, clicking, etc.
The :empty pseudo class represent the element with no children or elements inside it.
The :first pseudo class represent the first page of the print document and generally used along with @page at rule.
The :first-child pseudo class represent the first element among a group of elements such as first list element inside lists, first paragraph inside div.
The :first-of-type pseudo class represent the first element of its type among a group of elements.
The :fullscreen pseudo class represent the elements that are in fullscreen mode such as videos.
The :future() pseudo class represent the elements that appears after :current() element. Check for browser compatibility while using it. For example, :future(div, p)
The :focus pseudo class represent the elements that are current focused such as writing on text input, selecting radio options.
The :focus-visible pseudo class represent the elements that are current focused and User Agent also determines that the element is focused.
The :focus-within pseudo class represent the elements and its descendant that are focused.
The :has() pseudo class represent the parent or sibling elements based on the relative selectors provided as arguments. Check for browser compatibility while using it. For example div:has(h3.active) = selects all div that has h3 headings with active class.
The :host pseudo class represent the shadow host elements of shadow DOM.
The :host() pseudo class represent the shadow host elements of shadow DOM based on the relative selectors provided as arguments.
The :host-context() pseudo class represent the specific element in shadow host elements of shadow DOM based on the relative selectors provided as arguments.
The :hover pseudo class represent the elements when user point the mouse over it.
The :indeterminate pseudo class represent the elements that has indeterminate state such as checkbox.
The :in-range pseudo class represent the input elements whose value is within a specified range given by min and max attributes.
The :invalid pseudo class represent the input elements whose value failed to validate.
The :is() pseudo class represent the elements based on the selector list given as arguments. For example, :is(#navigation li.active) = selects all li having active class inside element having id navigation.
The :lang() pseudo class represent the elements based on the language. For example, :lang("en-US")
The :last-child pseudo class represent the last element among a group of elements such as last list element inside lists, last paragraph inside div.
The :last-of-type pseudo class represent the last element of its type among a group of elements.
The :left pseudo class represent the left handed page of the print document and generally used along with @page at rule.
The :link pseudo class represent the link element that are unvisited by the user.
The :local-link pseudo class represent the link element whose absolute URL are same as HTML document root URL. Check for browser compatibility while using it.
The :modal pseudo class represent the element that excludes all the interaction outside of it.
The :not() pseudo class represent the element that do not match the criteria given as arguments. For example, :not(#navigation li.main-nav) = selects all list items not having main-nav class inside element having id navigation
The :nth-child() pseudo class represent the element based on the their position. For example, :nth-child(even), :nth-child(n+5)
The :nth-col() pseudo class represent the table cell element based on the their position. Check for browser compatibility while using it. For example, :nth-col(even), :nth-col(n+5)
The :nth-last-child() pseudo class represent the element based on the their position starting from the end.
The :nth-last-col() pseudo class represent the table cell element based on the their position starting from the end. Check for browser compatibility while using it.
The :nth-of-type() pseudo class represent the element of its type (same tag) based on the their position.
The :nth-last-of-type() pseudo class represent the element of its type (same tag) based on the their position starting from the end. Check for browser compatibility while using it.
The :only-child() pseudo class represent the element without any sibling.
The :only-of-type() pseudo class represent the element of same type without any sibling.
The :optional pseudo class represent the input element not having required attribute.
The :out-of-range pseudo class represent the input element whose value is outside thee range specified by min and mx attributes.
The :past() pseudo class represent the elements that appears before :current() element. Check for browser compatibility while using it. For example, :past(div, p)
The :picture-in-picture pseudo class represent the element that is in picture-in-picture mode like video.
The :placeholder-shown pseudo class represent the input elements whose placeholder is currently displaying.
The :paused pseudo class represent the elements that is paused like audio and video.
The :playing pseudo class represent the elements that is playing like audio and video.
The :read-only pseudo class represent the input elements having readonly attribute or can only be read but not write.
The :read-write pseudo class represent the input elements can be read and write.
The :required pseudo class represent the input elements having required attribute.
The :right pseudo class represent the right handed page of the print document and generally used along with @page at rule.
The :root pseudo class represent the root element that is html element.
The :scope pseudo class represent the element that are a reference point for selectors to match against.
Not properly documented yet.
The :target pseudo class represent the element whose id is equal to the URL fragment.
The :target-within pseudo class represent the element or container element whose id is equal to the URL fragment. Check for browser compatibility while using it.
The :user-invalid pseudo class represent the input element whose value is not valid after user interaction. Check for browser compatibility while using it.
The :valid pseudo class represent the input element whose value s valid.
The :visited pseudo class represent the link element which is visited by user.
The :where() pseudo class represent the elements based on the selector list given as arguments. For example, :is(#navigation li.active) = selects all li having active class inside element having id navigation.
A pseudo element is a keyword that defines an entity of the selected element. For example, placeholder class represent the entity of input element where it show text when field is empty.
It is defined by the double colon (::) followed by pseudo-element name.
Syntax = ::pseudo-element
/* Select all input element placeholder text */
input::placeholder{
color: green;
}
The ::after pseudo element creates a last child of selected element to add some content.
The ::backdrop pseudo element creates box of viewport size when element is in fullscreen mode or a dialog is open.
The ::before pseudo element creates a first child of selected element to add some content.
The ::cue pseudo element represent the cue element such as video caption.
The ::cue-region pseudo element represent the cue element such as video caption. Check for browser compatibility while using it.
The ::file-selector-button pseudo element represent the button for file input element.
The ::first-letter pseudo element represent the first letter of first line of selected element.
The ::first-line pseudo element represent the first line of selected element.
The ::grammar-error pseudo element represent text which failed grammar check by User Agent. Check for browser compatibility while using it.
The ::highlight() pseudo element represent custom highlight content. Check for browser compatibility while using it.
The ::marker pseudo element represent the marker of list such as bullet, number, etc.
The ::part() pseudo element represent the shadow element having part attribute.
The ::placeholder pseudo element represent the placeholder text of input element.
The ::selection pseudo element represent the highlighted content such as clicking, dragging, and selecting.
The ::slotted() pseudo element represent the elements that has been placed in a slot of HTML shadow DOM tree.
The ::spelling-error pseudo element represent text which failed spelling check by User Agent. Check for browser compatibility while using it.
The ::target-text pseudo element represent text that has been scroll to. Check for browser compatibility while using it.
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved