:hover :focus :active and :visited
Style interactive link and button states using the most common CSS pseudo-classes.
:hover :focus :active and :visited is a free CSS Academy lesson on CoddyKit. This is lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.
What are Pseudo-classes?
Pseudo-classes select elements based on their state or relationship to other elements. They start with a single colon : and do not require adding attributes to HTML.
:hover
:hover applies when the user's pointer is over an element. The most common interactive state selector.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus applies when an element receives focus (via keyboard Tab or programmatic focus). Critical for accessibility.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible is a smarter version of :focus — it only shows the focus ring when focus was received via keyboard, not mouse. This gives keyboard users focus indicators without mouse-click rings.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within applies to an element when any of its descendants have focus. Useful for styling form containers or search bars when active.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active applies while an element is being activated — during a mouse click or touch. Creates visual feedback for interactive elements.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited styles links the user has already visited. Due to privacy concerns, only a limited set of properties can be styled with :visited (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Link States Order (LVHA)
When styling all four link states, follow the LVHA order to prevent specificity issues: Link, Visited, Hover, Active.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Hover on Touch Devices
Touch screens do not have a hover state in the same way as mice. :hover may be briefly activated on tap. For touch-specific interactions, use :active or the @media (hover: none) media query.
Combining States
Pseudo-classes can be chained to style multiple states simultaneously:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Transition Hover States
Smooth hover effects using transitions on the base state (not the :hover state) so the transition plays in both directions:
<button class="btn demo-hover">Hover transitions smoothly</button>
Quick Check
Which pseudo-class shows focus styles only for keyboard navigation, not mouse clicks?
Recap
:hover activates on pointer over; :focus on input focus; :active during click; :visited for visited links. Use :focus-visible for keyboard-only focus rings. Follow LVHA order for link states. Always provide visible focus indicators for accessibility.
Learn CSS with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 40
- Lessons
- 159
Frequently Asked Questions
Is the “:hover :focus :active and :visited” lesson free?
Yes — the full text of “:hover :focus :active and :visited” is free to read here on the web. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO. The CSS Academy course includes 4 lessons in total.
What will I learn in “:hover :focus :active and :visited”?
Style interactive link and button states using the most common CSS pseudo-classes. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start CSS Academy?
No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
How long does the “:hover :focus :active and :visited” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this CSS Academy lesson?
Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- :hover :focus :active and :visited
- :nth-child and :nth-of-type
- :not() :is() and :where()
- :checked :disabled and Form State Pseudos