Nested pseudo
Learn nested pseudo-classes like &:hover.
Nested pseudo-classes
Pseudo-classes capture an element's state: :hover, :focus, :active. Nested, they attach to the outer selector with &: .link { &:hover { color: navy; } }.
This is the same as .link:hover. Without &, writing :hover { } makes the browser read .link :hover, which means a hover on something inside the link. & keeps the right target.
Nested pseudo-elements
Pseudo-elements create a piece of an element: ::before, ::after. Nested, they also attach with &: .badge { &::before { content: '●'; } }.
The double-colon form (::) is the modern standard; the single-colon :before is a leftover from old CSS but still works. New code should use two colons.
Exercise Add hover and content to the link
Add two nested blocks inside the .link selector: first &:hover with color: navy; second &::after with content: '→'.
Show example solution
Add two blocks inside .link.
Example solution:
/* add hover and after inside .link */
.link {
text-decoration: none;
&:hover {
color: navy;
}
&::after {
content: '→';
}
}Test yourself
-
Match each pseudo-class to its state
- &:hover
- On hover
- &:focus
- On focus
- &:active
- While clicked
- &:disabled
- When disabled
-
Which one is a pseudo-element?
- &:hover
- &:focus
- &::before
- &:active
Show answer
&::before — Correct. ::before is a pseudo-element; the double colon sets it apart from pseudo-classes.
-
Write the pseudo-element
.badge { ____ { content: 'Yeni'; } }Show answer
.badge { &::before { content: 'Yeni'; } }