CSS Pseudo-classes and Pseudo-elements#

The concept of pseudo-classes and pseudo-elements in CSS is introduced to format information outside the document tree. In other words, pseudo-classes and pseudo-elements are used to style parts of the document that are not represented in the document tree, such as the first letter of a sentence or the first element in a list.

Pseudo-classes#

Pseudo-classes are used to add corresponding styles to elements when they are in a certain state, which changes dynamically based on user behavior. For example, when a user hovers over a specified element, we can describe the state of this element using :hover. Although it is similar to regular CSS classes and can be used to add styles to existing elements, it can only add styles to elements in states that cannot be described by the DOM tree, hence the name "pseudo-class".

State-based Pseudo-classes#

These are selected based on the current state of an element. The state of an element changes dynamically during user interaction, so the element will present different styles based on its state. When an element is in a certain state, it will have a certain style, and when it enters another state, that style will be lost.

• :link applies to links that have not been visited.
• :hover applies to elements when the mouse hovers over them.
• :active applies to elements that are being activated.
• :visited applies to links that have been visited, mutually exclusive with :link.
• :focus applies to elements that have keyboard input focus.

Structural Pseudo-classes#

These are new selectors introduced in CSS3 that use the DOM tree to filter elements. They match elements based on the interrelationships of the document structure, reducing the need for defining class and id attributes and making the document structure more concise.

• div:first-child selects every div element that is the first child of its parent.
• div:last-child selects every div element that is the last child of its parent.
• div:nth-child(n) selects every div element that is the nth child of its parent.
• div:nth-last-child(n) same as above, but counting starts from the last child of this element.
• div:nth-of-type(n) selects every div element that is the nth div element of its parent.
• div:nth-last-of-type(n) same as above, but counting starts from the last child.
• div:first-of-type selects every div element that is the first div element of its parent.
• div:last-of-type selects every div element that is the last div element of its parent.
• div:only-child selects every div element that is the only child of its parent.
• div:only-of-type selects every div element that is the only div element of its parent.
• :empty selects elements that have no content.
• :checked matches input elements that are checked, including radio and checkbox.
• :default matches elements that are the default selection, for example, submit buttons are always the default buttons in forms.
• :disabled matches disabled form elements.
• :enabled matches form elements that do not have the disabled attribute set.
• :valid matches form elements that pass the validation criteria.

Pseudo-elements#

Pseudo-elements are used to create elements that are not in the document tree and apply styles to them. In fact, pseudo-elements are used to perform tasks that regular selectors cannot do, such as adding text before an element and styling that text using ::before.

The CSS3 specification requires using a single colon : for CSS3 pseudo-classes and a double colon :: for CSS3 pseudo-elements, in order to distinguish between pseudo-classes and pseudo-elements.

• ::first-letter selects the first letter of the text in an element.
• ::first-line selects the first line of the text in an element.
• ::before inserts new content at the beginning of the element's content.
• ::after inserts new content at the end of the element's content.
• ::selection matches the portion of the content that the user has selected or is in a highlighted state.
• ::placeholder matches the placeholder text, and this pseudo-element only takes effect when the element has the placeholder attribute set.

Daily Question#