CSS Pseudo-classes and Pseudo-elements

Mohamed points at the temple paintings: "See how the colors change depending on the light? In CSS, we have pseudo-classes and pseudo-elements that allow changing the appearance of elements depending on their state or adding decorations without changing the HTML!"

Pseudo-classes - Reacting to State

Pseudo-classes allow styling elements depending on their state or position in the document. We write them with a single colon

:

Interactive States

1/* When cursor is over element */
2a:hover {
3  color: gold;
4  text-decoration: underline;
5}
6
7/* When element is active (clicked) */
8button:active {
9  background-color: darkgoldenrod;
10  transform: scale(0.95);
11}
12
13/* When element has focus (e.g., after clicking Tab) */
14input:focus {
15  border-color: gold;
16  outline: 2px solid rgba(255, 215, 0, 0.5);
17}
18
19/* Visited link */
20a:visited {
21  color: #8B7355;
22}

Structural Pseudo-classes

Allow selecting elements based on their position in the document tree:

1/* First child element */
2li:first-child {
3  font-weight: bold;
4  color: gold;
5}
6
7/* Last child element */
8li:last-child {
9  border-bottom: 2px solid gold;
10}
11
12/* Every other element (even) */
13tr:nth-child(even) {
14  background-color: #f5f0e6;
15}
16
17/* Every other element (odd) */
18tr:nth-child(odd) {
19  background-color: #fff;
20}
21
22/* Every third element */
23li:nth-child(3n) {
24  color: crimson;
25}
26
27/* Third element from end */
28li:nth-last-child(3) {
29  font-style: italic;
30}

Modern Pseudo-classes

1/* Negation - all links EXCEPT .special class */
2a:not(.special) {
3  color: #8B6914;
4}
5
6/* Grouping selectors - :is() */
7:is(h1, h2, h3):hover {
8  color: gold;
9}
10
11/* :has() - parent selector (newest!) */
12/* Style article THAT CONTAINS an image */
13article:has(img) {
14  border: 2px solid gold;
15  padding: 20px;
16}
17
18/* Div that contains empty paragraph */
19div:has(p:empty) {
20  display: none;
21}

Pseudo-elements - Decorations Without HTML

Pseudo-elements allow styling parts of an element or adding decorative content without changing HTML. We write them with double colons

::

::before

and

::after

Add content before or after the element's content. They require the

content

1/* Add hieroglyph before heading */
2h2::before {
3  content: "𓂀 ";
4  color: gold;
5}
6
7/* Add arrow after link */
8a::after {
9  content: " →";
10  color: gold;
11}
12
13/* Decorative line under heading */
14h1::after {
15  content: "";
16  display: block;
17  width: 100px;
18  height: 3px;
19  background: linear-gradient(to right, gold, transparent);
20  margin-top: 10px;
21}

::placeholder

and

::selection

1/* Placeholder style in input */
2input::placeholder {
3  color: #c4a35a;
4  font-style: italic;
5}
6
7/* Selected text style */
8p::selection {
9  background-color: gold;
10  color: #2c1810;
11}

::first-line

and

::first-letter

1/* First letter of paragraph - initial effect */
2p::first-letter {
3  font-size: 3em;
4  float: left;
5  color: gold;
6  font-family: serif;
7  line-height: 1;
8  margin-right: 5px;
9}
10
11/* First line of text */
12p::first-line {
13  font-weight: bold;
14  color: #8B6914;
15}

Practical Applications

Interactive List with Hover Effects

1.pharaoh-list li {
2  padding: 10px;
3  transition: all 0.3s ease;
4  border-left: 3px solid transparent;
5}
6
7.pharaoh-list li:hover {
8  background-color: #f5f0e6;
9  border-left-color: gold;
10  padding-left: 20px;
11}
12
13.pharaoh-list li:nth-child(even) {
14  background-color: #faf8f3;
15}
16
17.pharaoh-list li::before {
18  content: "☥ ";
19  color: gold;
20}

Buttons with Pseudo-elements

1.btn-egyptian {
2  position: relative;
3  padding: 12px 24px;
4  background: #8B6914;
5  color: white;
6  border: none;
7  overflow: hidden;
8}
9
10.btn-egyptian::before {
11  content: "";
12  position: absolute;
13  top: 0;
14  left: -100%;
15  width: 100%;
16  height: 100%;
17  background: linear-gradient(
18    90deg, transparent, rgba(255,215,0,0.3), transparent
19  );
20  transition: left 0.5s;
21}
22
23.btn-egyptian:hover::before {
24  left: 100%;
25}

Tooltips with CSS

1.tooltip {
2  position: relative;
3}
4
5.tooltip::after {
6  content: attr(data-tooltip);
7  position: absolute;
8  bottom: 100%;
9  left: 50%;
10  transform: translateX(-50%);
11  background: #2c1810;
12  color: gold;
13  padding: 5px 10px;
14  border-radius: 4px;
15  font-size: 14px;
16  white-space: nowrap;
17  opacity: 0;
18  pointer-events: none;
19  transition: opacity 0.3s;
20}
21
22.tooltip:hover::after {
23  opacity: 1;
24}

Mohamed summarizes: "Pseudo-classes react to element state, pseudo-elements add decorations. Together they create dynamic interfaces without additional HTML!"