The ::first-line pseudo-element puts a style on a first line in a block-level container. It does not select inline-level elements, such as images or inline-tables. Some CSS properties can be used to style the ::first-line, they are: The ::first-letter inherits the styles applied using ::first-line. If both elements are used, the styles specified by ::first-letter override those applied by ::first-line. The ::first-line pseudo-element can also be…

The ::first-letter pseudo-element puts a style on a first letter of the first line in a block-level container. It does not select inline-level elements, such as images or inline-tables. The ::first-letter pseudo-element does not identify punctuation marks that precede or immediately follows the first letter. It also applies if the first letter is, in fact, a number. Allowable properties…

The CSS :first-child pseudo-class selects the element if it is the first child among other elements. The :first-of-type selector can be used if the user wants to select and apply the style on the first paragraph. The :first-child selector is actually similar to :first-of-type but there is a difference: it is less specific. The :first-child matches only the first child of a parent…

The CSS :enabled pseudo-class selects and styles elements that are enabled. These elements are usually form elements, such as buttons (<button>), select menus (<select>), input types (<input>), and textareas (<textarea>). Enabled elements accept clicks, text input, or focus. Version HTML Living Standard HTML5 Selectors Level 4 Syntax Example of the :enabled selector: Example of the :enabled selector…

The CSS :empty pseudo-class selects the elements that do not have any child element or text content. The ::before and ::after pseudo-elements do not affect the emptiness of an element, even if they exist inside the element. If another tag directly follows the open tag, then it is considered empty. Self-closing elements such as <hr />, <br />, and <img /> are considered empty and…

The :disabled pseudo-class selects and styles elements that are disabled. These elements are usually form elements, such as buttons (<button>), select menus (<select>), input types (<input>), and textareas (<textarea>). Disabled elements do not accept clicks, text input, or focus. Version CSS Basic User Interface Module Level 3 Selectors Level 3 Syntax Example of setting a background color…

The :dir() pseudo-class matches elements that are based on the directionality of the text contained in them. The :dir() does not select based on stylistic states that is why the directionality of an element needs to be specified in the document. In HTML5, the directionality of an element can be specified using the dir attribute. The :dir() selector can have either “ltr” or “rtl”…

The :default pseudo-class matches the default element in a group of associated elements, such as the radio button in a group of buttons that are selected by default, even if the user has selected a different value. This pseudo-class can only be used on the <button>, <input> (when type=”checkbox” or type=”radio”) and <option> elements. Version HTML Living Standard HTML5 Selectors Level 4 Syntax Example of…

The :checked pseudo-class is used to select elements when they are in the selected state. It only relates to the <input> (only for radio buttons and checkboxes) and the <option> elements. Checkbox and radio elements can be toggled “on” and “off” by the user. Version HTML Living Standard HTML5 Selectors Level 4 Syntax In the following example, check the checkbox to…

The ::before pseudo-element is a generated content element that adds any kind of element before the content. It can be used to insert any kind of content, including characters, strings of text, and images. The value is defined by the content property. By default, the ::before pseudo-element is inline. This pseudo-element can be animated, positioned or floated like any other content.…