Pseudo-klasy i pseudo-elementy CSS

Mohamed wskazuje na malowidła w świątyni: "Widzisz, jak kolory zmieniają się w zależności od światła? W CSS mamy pseudo-klasy i pseudo-elementy, które pozwalają zmieniać wygląd elementów w zależności od ich stanu lub dodawać dekoracje bez zmiany HTML!"

Pseudo-klasy - reagowanie na stan

Pseudo-klasy pozwalają stylować elementy w zależności od ich stanu lub pozycji w dokumencie. Zapisujemy je z jednym dwukropkiem

:

Stany interaktywne

1/* Gdy kursor jest nad elementem */
2a:hover {
3  color: gold;
4  text-decoration: underline;
5}
6
7/* Gdy element jest aktywny (kliknięty) */
8button:active {
9  background-color: darkgoldenrod;
10  transform: scale(0.95);
11}
12
13/* Gdy element ma fokus (np. po kliknięciu Tab) */
14input:focus {
15  border-color: gold;
16  outline: 2px solid rgba(255, 215, 0, 0.5);
17}
18
19/* Odwiedzony link */
20a:visited {
21  color: #8B7355;
22}

Pseudo-klasy strukturalne

Pozwalają wybierać elementy na podstawie ich pozycji w drzewie dokumentu:

1/* Pierwszy element dziecko */
2li:first-child {
3  font-weight: bold;
4  color: gold;
5}
6
7/* Ostatni element dziecko */
8li:last-child {
9  border-bottom: 2px solid gold;
10}
11
12/* Co drugi element (parzyste) */
13tr:nth-child(even) {
14  background-color: #f5f0e6;
15}
16
17/* Co drugi element (nieparzyste) */
18tr:nth-child(odd) {
19  background-color: #fff;
20}
21
22/* Co trzeci element */
23li:nth-child(3n) {
24  color: crimson;
25}
26
27/* Trzeci element od końca */
28li:nth-last-child(3) {
29  font-style: italic;
30}

Nowoczesne pseudo-klasy

1/* Negacja - wszystkie linki OPRÓCZ klasy .special */
2a:not(.special) {
3  color: #8B6914;
4}
5
6/* Grupowanie selektorów - :is() */
7:is(h1, h2, h3):hover {
8  color: gold;
9}
10
11/* :has() - selektor rodzica (najnowszy!) */
12/* Styluj artykuł, KTÓRY ZAWIERA obrazek */
13article:has(img) {
14  border: 2px solid gold;
15  padding: 20px;
16}
17
18/* Div, który zawiera pusty paragraf */
19div:has(p:empty) {
20  display: none;
21}

Pseudo-elementy - dekoracje bez HTML

Pseudo-elementy pozwalają stylować części elementu lub dodawać treść dekoracyjną bez zmiany HTML. Zapisujemy je z dwoma dwukropkami

::

::before

i

::after

Dodają treść przed lub po zawartości elementu. Wymagają właściwości

content

1/* Dodaj hieroglif przed nagłówkiem */
2h2::before {
3  content: "𓂀 ";
4  color: gold;
5}
6
7/* Dodaj strzałkę po linku */
8a::after {
9  content: " →";
10  color: gold;
11}
12
13/* Dekoracyjna linia pod nagłówkiem */
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

i

::selection

1/* Styl placeholdera w input */
2input::placeholder {
3  color: #c4a35a;
4  font-style: italic;
5}
6
7/* Styl zaznaczonego tekstu */
8p::selection {
9  background-color: gold;
10  color: #2c1810;
11}

::first-line

i

::first-letter

1/* Pierwsza litera paragrafu - efekt inicjału */
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/* Pierwsza linia tekstu */
12p::first-line {
13  font-weight: bold;
14  color: #8B6914;
15}

Praktyczne zastosowania

Interaktywna lista z efektami hover

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}

Przyciski z pseudo-elementami

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 z 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 podsumowuje: "Pseudo-klasy reagują na stan elementu, pseudo-elementy dodają dekoracje. Razem tworzą dynamiczne interfejsy bez dodatkowego HTML-a!"