Псевдокласс First-letter или как выделить первую букву в css

Всем привет, сегодня у меня очень коротенькая информация, которая поможет вам сделать на сайте первую букву в любом элементе с помощью css. В этом нам поможет псевдокласс :first-letter. Для новичков советую почитать статью о том, что такое псевдокласс.

first-letter в действии

Итак, все предельно просто. Допустим, у нас есть текст – 3 абзаца. В первом абзаце нужно выделить самую первую букву, как часто делают во многих книгах. То есть именно этой букве нужно задать свои собственные стили: размер шрифта, цвет и т.д.

Это делается с помощью псевдокласса :first-letter, который надо прописать элементу, внутри которого непосредственно располагается наш текст. Но если мы сделаем так:

P:first-letter{color: red}

Как вы думаете, в каких абзацах первую буквы станут красными? Правильно, во всех абзацах.first-child псевдокласс А нам-то нужно только в первом! Варианты решения:
— прописать первого абзацу стилевой класс и через этот селектор оформить букву
— выбрать первый абзац с помощью свойств first-child или nth-child

Решение 1 в коде:

.abzac1:first-letter{стили…}

Перед этим нам нужно задать первому абзацу соответствующий класс. Если вы не знаете, как это делается, смотрите в этой статье.

Решение 2 в коде:

P:first-child:first-letter{стили…} 

Как видите, мы использовали два псевдокласса и таким образом выбрали первый абзац и первую букву в нем. Тоже достаточно удобно.как выделить первую букву в css

Итак, мы нашли 2 простейших решения. Читайте этот блог, чтобы узнавать другие полезные вещи.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: