-
CSS :link Pseudo Class
The :link pseudo-class is used to select and style unvisited links in a page. It applies to links that have not yet been visited. An element can be both :visited and :active so as the :link pseudo-class will have an effect. :active, :hover, or :visited pseudo-classes override the style defined by the :link pseudo-class. For styling links properly, the :link rule should be placed before all other link-related…
-
CSS :last-of-type Pseudo Class
The CSS :last-of-type pseudo-class selects an element that is the last element of its type in the list of children of its parent. The :last-of-type pseudo-class is the same as the :nth-last-of-type. Version CSS2 Universal Selector CSS2 Universal Selector Syntax Example of the :last-of-type selector: Nested elements Nested elements can also be targeted. Example of targeted nested elements: The :last-child and the…
-
CSS :last-child Pseudo Class
The CSS :last-child pseudo-class selects the element if it is the last child among the other elements. The :last-of-type selector can be used if the user wants to select and apply the style on the last paragraph whether or not it is the last child. Version Selectors Level 4 Selectors Level 3 Syntax Example of the :last-child selector: Example of the…
-
CSS :lang() Pseudo Class
The :lang() pseudo-class matches an element based on the language it is determined to be in. Any language determined in HTML uses a combination of the lang attribute (e.g <html lang=”it”>), the <meta> tag, and by information from the protocol (e.g HTTP headers). The lang attribute value is a two-letter language code, like lang=”it” for Italian, or two language codes combined, like lang=”fr-ca” for Canadian French. Using…
-
CSS :invalid Pseudo Class
The CSS :invalid pseudo-class selects <form> and <fieldset> elements with a value that is invalid according to their settings. The :invalid selector only works for form <input> elements with min and max attributes, email fields without a legal email, number fields without a numeric value or required fields with empty value. Notes Radio buttons When one of the radio buttons in a group is required, the :invalid selector is…
-
CSS :indeterminate Pseudo Class
The CSS :indeterminate pseudo-class selects a user interface element that has an indeterminate state. The :indeterminate pseudo-class selects: The :checked pseudo-class is used to style the checked state of checkbox and radio buttons. The :indeterminate pseudo-class can be linked with other selectors such as :hover providing hover styles for the element that is in an indeterminate state. Version CSS Basic User…
-
CSS :in-range Pseudo Class
The :in-range pseudo-class selects all elements with a value that is within a specified range. It applies to elements having or taking a range limitation. If this limitation is absent, the element can not be “in-range” or “out-of-range”. Version HTML Living Standard Selectors Level 4 Syntax Example of the :in-range pseudo-class:
-
CSS :hover Pseudo Class
The :hover pseudo-class selects and styles the hovered element. It is covered by the user. The elements are hovered when the user moves the mouse over the element. It does not activate the pointing device. The :link, :active, or :visited pseudo-classes override the style defined by the :hover pseudo-class. Version Selectors Level 3 Selectors Level 4 Syntax Example of the :hover pseudo-class: Hover over the…
-
CSS :fullscreen Pseudo Class
The :fullscreen pseudo-class selects and styles an element that is being displayed in fullscreen mode. The :fullscreen selector works when the fullscreen mode is entered. Version Fullscreen API Syntax In the following example, click the button to see the element in fullscreen mode. Example of the :fullscreen selector:
-
CSS :focus Pseudo Class
The :focus selects and styles the elements that are focused by the user. Elements, such as <input>, <button>, and <textarea> can receive focus either by tabbing using the keyboard or by clicking. Accessibility Concerns The visual focus indicator should be accessible to all people. According to WCAG 2.1 SC 1.4.11 Non-Text Contrast, the visual focus indicator should be at least 3 to…