Menu
Advanced Selectors
CSS Pseudo-classes
States like :hover, :focus, :first-child.
1Dynamic States
Style elements when user interacts or based on tree position.
Example Code
css
button:hover { opacity: 0.8; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }2Understand it in a real interface
A pseudo-class matches an element in a particular state or relationship, such as hover, focus, or a position among siblings. Not every state is available through every input method. A hover treatment should not be the only clue that a control is usable.
3Try it yourself
Give a link separate hover and focus-visible styles. Navigate with a mouse and then with the keyboard. Add a small list and inspect an nth-child rule after inserting a new item, so that you can see how structural matching depends on the document.
Finished reading?
Mark this topic as complete to track progress.