4 min read
•Question 8 of 49easyWhat are CSS Pseudo-classes?
Understanding :hover, :focus, :nth-child and other pseudo-classes.
What You'll Learn
- What pseudo-classes are
- Common pseudo-classes
- Usage examples
What are Pseudo-classes?
Pseudo-classes select elements based on state or position, using a single colon :.
Common Pseudo-classes
| Pseudo-class | Selects |
|---|---|
| :hover | Mouse over |
| :focus | Has focus |
| :active | Being clicked |
| :first-child | First child element |
| :last-child | Last child element |
| :nth-child(n) | nth child element |
Examples
styles.cssCSS
/* Hover state */
a:hover { color: blue; }
/* Focus state */
input:focus { border-color: blue; }
/* First and last child */
li:first-child { font-weight: bold; }
li:last-child { border-bottom: none; }
/* Every other row */
tr:nth-child(even) { background: #f5f5f5; }
/* First 3 items */
li:nth-child(-n+3) { color: red; }