# CSS: Unknown pseudo-element or pseudo-class “::hover”.
> Canonical HTML version: https://rocketvalidator.com/html-validation/css-unknown-pseudo-element-or-pseudo-class-hover
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)
CSS distinguishes between pseudo-classes and pseudo-elements using different colon syntax. Pseudo-classes like `:hover`, `:focus`, and `:active` describe a temporary state of an element and use a single colon (`:`). Pseudo-elements like `::before`, `::after`, and `::first-line` target a specific part of an element's rendering and use double colons (`::`). Writing `::hover` conflates these two concepts — there is no pseudo-element called `hover` in any CSS specification.
This matters for several reasons. First, most browsers will silently ignore the invalid `::hover` rule entirely, meaning your hover styles simply won't apply. Users will see no visual feedback when hovering over interactive elements like links and buttons, which hurts usability. Second, the lack of hover feedback can be an accessibility concern — sighted users rely on hover states to identify clickable elements. Third, invalid CSS can cause unpredictable behavior across different browsers and versions, making your site harder to maintain.
The confusion often arises because CSS2 originally allowed single colons for pseudo-elements (e.g., `:before`), and CSS3 introduced the double-colon syntax to clearly separate pseudo-elements from pseudo-classes. This means you might see both `:before` and `::before` in the wild, which can make it tempting to assume that double colons work everywhere. The key rule to remember: **states use one colon (`:hover`, `:focus`, `:visited`), and sub-element targets use two colons (`::before`, `::after`, `::placeholder`)**.
## Examples
### Incorrect: using double colons with `hover`
```css
a::hover {
color: red;
}
button::hover {
background-color: blue;
}
```
Both rules above will trigger the validation error and will likely be ignored by browsers.
### Correct: using a single colon with `hover`
```css
a:hover {
color: red;
}
button:hover {
background-color: blue;
}
```
### Correct usage of pseudo-classes vs. pseudo-elements
This example demonstrates how single-colon pseudo-classes and double-colon pseudo-elements are used together correctly:
```css
a:hover {
color: red;
}
a:focus {
outline: 2px solid blue;
}
a::before {
content: "→ ";
}
```
### Full HTML document with valid `:hover` usage
```html
Hover Example
Hover over this link
```
## Quick Reference
| Type | Syntax | Examples |
|------|--------|---------|
| Pseudo-class (state) | Single colon `:` | `:hover`, `:focus`, `:active`, `:visited`, `:first-child` |
| Pseudo-element (sub-part) | Double colon `::` | `::before`, `::after`, `::first-line`, `::placeholder` |
If you encounter this validation error, search your stylesheets for `::hover` and replace every instance with `:hover`. The same fix applies if you accidentally use double colons with other pseudo-classes like `::focus` or `::active`.