# Псевдоелементи тексту

## Псевдоелемент ::first-letter <a href="#psevdoelement-first-letter" id="psevdoelement-first-letter"></a>

Псевдоелемент <mark style="background-color:red;">::first-letter</mark> - це селектор, який дозволяє стилізувати першу літеру тексту вибраного елемента. Він може бути застосований до елементів блоку, таких як параграфи, заголовки або будь-які інші елементи, які мають текстовий контент.

За допомогою <mark style="background-color:red;">::first-letter</mark> можна змінити розмір, колір, стиль шрифту та інші стилізації першої літери в тексті. Тобто ми вказуємо в файлі стилів основний селектор і також додатковий стиль псевдоелемента.

```css
селектор {
  // стилі
}

селектор::first-letter {
  // стилі
}
```

{% embed url="<https://codepen.io/khomiak/pen/abPQGQv>" %}

У цьому прикладі, перша літера в кожному параграфі має розмір шрифту 150%, буде жирною (bold) і червоного (red) кольору.

## Псевдоелемент ::selection <a href="#psevdoelement-selection" id="psevdoelement-selection"></a>

Псевдоелемент <mark style="background-color:red;">::selection</mark> - це CSS-селектор, який дозволяє стилізувати текст або фон виділеного тексту на веб-сторінці. Можна встановити різні стилі для виділеного тексту, такі як колір тексту, фоновий колір, шрифт і т. д.

&#x20;У прикладі нижче спробуйте виділити текст із застосуванням псевдоелемента ::selection і без нього.

{% embed url="<https://codepen.io/khomiak/pen/BavGxbV>" %}