CSS — Lesson 13
Pseudo-Classes & Pseudo-Elements
Styling elements in specific states or creating virtual elements.
Pseudo-Classes & Pseudo-Elements
Pseudo-classes select elements in specific states. Pseudo-elements create virtual elements for styling.
Common Pseudo-Classes
a:hover { color: blue; }
a:visited { color: purple; }
input:focus { border-color: blue; }
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
p:not(.special) { color: gray; }
Nth Child
tr:nth-child(even) { background: #f5f5f5; }
tr:nth-child(odd) { background: #fff; }
li:nth-child(3n) { color: red; }
Pseudo-Elements
.quote::before { content: '“'; }
.quote::after { content: '”'; }
.highlight::selection { background: yellow; }
p::first-line { font-weight: bold; }
Tip: Use
::before and ::after for decorative elements like icons, quotes, and separators without adding extra HTML.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →