CSS Pseudo-classes

CSS Pseudo-classes — Style elements based on state, position, and user interaction with CSS pseudo-classes. The guide walks through What are Pseudo-classes?, Dynamic Pseudo-classes, Structural Pseudo-classes, Form Pseudo-classes, Modern Logical Pseudo-classes. Pseudo-classes select elements based on their state or position, not their attributes. They start with a single colon (:). selector:pseudo-class { property: value; } Examples: a:hover { color: red; } /* Link being hovered */ li:first-child { ... } /* First child */ input:focus { ... } /* Focused input */ Categories of pseudo-classes: - Dynamic: User interaction (:hover, :focus,… These respond to user actions: Link states - order matters (LVHA): a:link { color: blue; } /* Unvisited link */ a:visited { color: purple; } /* Visited link */ a:hover { color: red; } /* Mouse over */ a:active { color: orange; } /* Being clicked */ Focus states: input:focus { outline: 2px solid #6366f1; outline-offset: 2px; } input:focus-visible {…