Nearby lessons

13 of 19

🔗 CSS Links & Pseudo-classes

📌 What are CSS Links & Pseudo-classes?

CSS Links & Pseudo-classes allow developers to style anchor elements and other HTML tags based on user interaction or structural position.

This includes styling links with :link, :hover, :visited, :active, and other pseudo-classes like :focus, :first-child, and ::selection.

🎨 Basic Link Styles

Styling anchor tags for different states: link, visited, hover, and active.
Example02
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🔍 :focus Pseudo-class

Styles elements like inputs and buttons when they receive focus.
Example03
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

👶 :first-child Pseudo-class

Targets the first child in a parent element.
Example04
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🔢 :nth-child() Pseudo-class

Selects elements based on position (even, odd, 3n, etc.).
Example05
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🚫 :not() Pseudo-class

Selects all elements except those that match a selector.
Example06
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

⏮️ ::before and ::after Pseudo-elements

Insert content before or after elements.
Example07
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🖍️ ::selection Pseudo-element

Style the portion of text selected by the user.
Example08
🎨Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🧠 Test Your Knowledge

5 Questions
Progress: 0 / 5