CSS — Pseudo Classes

Hi everyone,

Welcome to chapter-3 of a series of articles where I will tell you about all selectors in CSS.

I will tell you what are pseudo-classes in this section.

4) Pseudo-classes

The : pseudo allow the selection of elements based on state information that is not contained in the document tree.

— Syntax

4.1) Linguistic pseudo-classes

These pseudo-classes reflect the document language, and enable the selection of elements based on language or script direction.

:lang

Matches elements based on the language they are determined to be in.

— Output

4.2) Location pseudo-classes

These pseudo-classes relate to links, and to targeted elements within the current document.

:any-link

Matches an element if the element would match either :link or :visited.

— Output

:link

Matches links that have not yet been visited.

— Output

:visited

Matches links that have been visited.

— Output

:target

Matches the element which is the target of the document URL.

— Output

4.3) User action pseudo-classes

These pseudo-classes require some interaction by the user in order for them to apply, such as holding a mouse pointer over an element.

:hover

Matches when a user designates an item with a pointing device, for example holding the mouse pointer over it.

— Output

:active

Matches when an item is being activated by the user, for example clicked on.

— Output

:focus

It is triggered when the user clicks or taps on an element or selects it with the keyboard’s Tab key.

— Output

:focus-visible

Matches when an element has focus and the user agent identifies that the element should be visibly focused. (It is triggered selects it with the keyboard’s Tab key.)

— Output

:focus-within

Matches an element if the element or any of its descendants are focused.

— Output

4.4) The input pseudo-classes

:autofill

Matches when an <input> has been autofilled by the browser. The class stops matching if the user edits the field.

— Output

:enabled

Represents any enabled element. An element is enabled if it can be activated (selected, clicked on, typed into, etc.) or accept focus.

— Output

:disabled

Represents any disabled element. An element is disabled if it can’t be activated (selected, clicked on, typed into, etc.) or accept focus.

— Output

:read-only

Represents an element (such as input or textarea) that is not editable by the user.

— Output

:read-write

Represents an element that is editable by the user.

We have given contenteditable attribute to the <p> tag, the text in it can be changed by the user.

— Output

:placeholder-shown

Represents any <input> or <textarea> element that is currently displaying placeholder text.

— Output

:default

Selects form elements that are the default in a group of related elements. It may match the <button>, <input type="checkbox">, <input type="radio">, and <option> elements:

• <input type="checkbox"> and <input type="radio"> match if they have the checked attribute.
• A default option element is the first one with the selected attribute, or the first enabled option in DOM order. multiple <select>s can have more than one selected option, so all will match :default.
• Matches if it is a <form>’s first default submission button

— Output

:checked

Represents any radio <input type="radio">, checkbox <input type="checkbox">, or option <option> in a <select> element that is checked or toggled to an on state.

— Output

:indeterminate

The :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute set to true, radio buttons which are members of a group in which all radio buttons are unchecked, and indeterminate <progress> elements.

We gave the checkbox elements the property indeterminate=true with JavaScript.

— Output

— After the selection

:valid & :invalid

:valid : Represents any <input> or other <form> element whose contents validate successfully. This allows to easily make valid fields adopt an appearance that helps the user confirm that their data is formatted properly.

:invalid : Represents any <form>, <input> or other <form> element whose contents fail to validate. Is useful for highlighting field errors for the user.

— Output

:in-range

Represents an <input> element whose current value is within the range limits specified by the min and max attributes. Useful for giving the user a visual indication that a field’s current value is within the permitted limits.

Only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be in-range nor out-of-range

— Output

:out-of-range

Represents an <input> element whose current value is outside the range limits specified by the min and max attributes. Useful for giving the user a visual indication that a field’s current value is outside the permitted limits.

only applies to elements that have (and can take) a range limitation. In the absence of such a limitation, the element can neither be in-range nor out-of-range

— Output

:required

Represents any <input>, <select>, or <textarea> element that has the required attribute set on it. Useful for highlighting fields that must have valid data before a form can be submitted.

— Output

:optional

Represents any <input>, <select>, or <textarea> element that does not have the required attribute set on it. Useful for styling fields that are not required to submit a form.

— Output

4.5) Tree-structural pseudo-classes

These pseudo-classes relate to the location of an element within the document tree.

:root

Matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.

— Output

Global CSS variables are defined in the root selector.

:empty

Represents any element that has no children. Children can be either element nodes or text (including whitespace). Comments, processing instructions, and CSS content do not affect whether an element is considered empty.

— Output

:nth-child

Matches elements based on their position among a group of siblings. Uses An+B notation to select elements.

Element indices are 1-based.

— Output

— Other examples

:nth-last-child

Matches elements based on their position among a group of siblings, counting from the end.

— Output

— Other examples

:first-child

Represents the first element among a group of sibling elements.

— Output

:last-child

Represents the last element among a group of sibling elements.

— Output

:only-child

Represents an element without any siblings. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

— Output

:nth-of-type

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements.

— Output

:nth-last-of-type

Uses An+B notation to select elements from a list of sibling elements that match a certain type from a list of sibling elements counting backwards from the end of the list.

— Output

:first-of-type

Represents the first element of its type among a group of sibling elements.

— Output

:last-of-type

Represents the last element of its type among a group of sibling elements.

— Output

:only-of-type

Represents an element that has no siblings of the same type.

— Output

4.6) Other psuedo-classes

:is()

The function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.

Note that older browsers support this functionality as :matches() or :any() , :any() works in exactly the same way as :matches() . Can be used to provide backwards compatibility.

Let’s select the <h3> element inside the <div>, <main> and <article> elements;

without use :is();

its use with is();

— Output

Let’s try to style the <h3> and <em> elements inside the <div>, <main> and <article> elements.

without use :is();

its use with is();

— Output

:where()

It does the same job as :is(), the difference is;

:where(): Always has 0 (zero) specificity.

:is(): has the specificity of the selector.

Let us examine the difference in the example below.

As can be seen;

We couldn’t make the color of <h3> elements selected with :is() green. But we were able to change the color of the <em> elements selected with :where() to green.

— Output

:not()

Represents elements that do not match a list of selectors.

We can also select as follows, but selecting using commas is not supported enough by browsers.

— Output

:defined

Represents any element that has been defined. This includes any standard element built in to the browser, and custom elements that have been defined.

— Output

:fullscreen

Matches every element which is currently in fullscreen mode.

— Output

:first

Used with the @page at-rule, represents the first page of a printed document.

By giving the <p> elements a page-break-after: always attribute, we made each a separate page.

— Output

:left

Used with the @page at-rule, represents all left-hand pages of a printed document.

Whether a given page is “left” or “right” is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page; if it has a major writing direction of right-to-left then it will be a :left page.

If it is left-to-right (dir='ltr'): left = 2. the sheet will be (Back) and leave a gap of 10 cm from the top when printing.

If it is right-to-left(dir='rtl'): left = 1. the sheet will be (Front) and will leave a gap of 10 cm from the top when printing.

— Output

:right

used with the @page at-rule, represents all right-hand pages of a printed document.

Whether a given page is “left” or “right” is determined by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page; if it has a major writing direction of right-to-left then it will be a :left page.

If it is left-to-right dir='ltr': right = 1. the sheet will be (Front) and will leave a gap of 10 cm from the top when printing.

If it is right-to-left(dir='rtl'): right = 2. the sheet will be (Back) and leave a gap of 10 cm from the top when printing.

— Output

For all the examples in this section, visit. See you in chapter-4.

We have come to the end of this chapter. See you in chapter-4.

Chapter-4

CSS — Pseudo Elements

Resource

CSS: Cascading Style Sheets | MDN