Псевдоклас First-letter або як виділити першу букву в css
Всім привіт сьогодні у мене дуже коротенька інформація, яка допоможе вам зробити на сайті першу букву в будь-якому елементі за допомогою css. У цьому нам допоможе псевдоклас: first-letter. Для новачків раджу почитати статтю про те, що таке псевдоклас.
first-letter у дії
Отже, все дуже просто. Припустимо, у нас є текст – 3 абзаци. У першому абзаці потрібно виділити найпершу літеру, як часто роблять у багатьох книгах. Тобто, саме цій літері потрібно задати свої власні стилі: розмір шрифту, колір і т.д.
Це робиться за допомогою псевдокласу: first-letter, який треба прописати елементу, всередині якого безпосередньо розташовується наш текст. Але якщо ми зробимо так:
Як ви вважаєте, в яких абзацах перші літери стануть червоними? Правильно, у всіх абзацах. А нам треба тільки в першому! Варіанти рішення: - прописати першого абзацу стильовий клас і через цей селектор оформити букву - вибрати перший абзац за допомогою властивостей first-child або nth-child
Рішення 1 у коді:
Перед цим нам потрібно задати першому абзацу відповідний клас. Якщо ви не знаєте, як це робиться, дивіться у статті.
Рішення 2 у коді:
Як бачите, ми використали два псевдокласи і таким чином вибрали перший абзац та першу букву в ньому. Теж досить зручно.
Отже, ми знайшли 2 найпростіші рішення. Читайте цей блог, щоб дізнаватися про інші корисні речі.