Псевдоэлементы :first-letter и :first-line

Ранее в статьях мы рассмотрели селекторы в статьях Основы работы с селекторами CSS, Часть 1, Часть 2 и псевдоклассы Часть1 и Часть 2. Теперь давайте рассмотрим псевдоэлементы.
Псевдоэлементы – это селекторы, которые выполняют простые функции: они позволяют выбрать либо первый символ либо первую строку элемента.
:first-letter – создает эффект буквицы, т.е. позволяет вывести в увеличенном, по сравнению с основным текстом, размере первую букву.
Например, напишем правило CSS:

p:first-letter{
  font: bold 65px Georgia, "Times New Roman", Times, serif;
  color: red;
}

Согласно этому правилу в следующем коде первая буква будет выведена жирным шрифом, размером 65 пикселей и красным цветом.

<p>Замечательный пример вывода буквицы</p>

:first-line часто используется для вывода первой строки параграфа в увеличенном размере.
Например правило CSS:

p:first-line{
font-size:120%;
}

выведет в следующем коде первую строку размером на 20% превышающий размер основного текста.

<p>Замечательный пример вывода первой строки большим размером чем все остальные
А здесь строки обычной высоты
А здесь строки обычной высоты
А здесь строки обычной высоты
</p>

В статье Псевдоклассы. Часть 1 мы рассмотрели наиболее используемые псевдоклассы. А сейчас рассмотрим два псевдокласса, которые используются реже, но знать их нужно :First-child и :Lang

Псевдокласс :First-child

Особеность этого псевдокласса в том, что с его помощью выбирается элемент только тогда, когда он является первым потомком родительского элемента:

p:first-child {
color: red;
}

Это правило можно прочесть так: Вывести красным цветом текст каждого параграфа, который является первым потомком.
Здесь нужно быть внимательным поскольку есть вероятность прочесть неправильно по аналогии с Псевдоклассы. Часть 1 : Выбрать первого потомка тега <p> и выделить его красным. Я специально перечеркнул правило, чтобы вы видили, что оно не является верным.

Теперь, когда вы познакомились с основными селекторами CSS, можно перейти к изучению возможности использования в CSS следующих правил. Таким образом, вы сможете улучшить качество вашего кода, а также сократить время загрузки веб-страниц.

Универсальный селектор

Этот селектор очень мощный инструмент и представлен он звездочкой (*). Его можно читать как «все элементы». Он часто используется для «сброса» полей и отступов для всех элементов страницы:

* {
margin: 0;
padding: 0;
}

Это эквивалентно тому, что записать все HTML элементы друг за другом и для каждого из них установить нулевые поля и отступы.
Обратите внимание, что такие записи для всех идентификаторов и описаний классов, используемых в CSS:

#about { ..rules..}
.post { ..rules }

идиентичны записи

*#about { ..rules..}
*.post {..rules..}

Псевдоклассы определяют состояние элементов, которое может изменяться со временем или с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на нее курсора мыши. При использовании псевдоклассов браузер не перегружает страницу, поэтому с их помощью можно получить разные динамические эффекты.
Главное правило, которое Вы должны помнить, что они завершают селектор, т.е. использование селекторов после псевдокласса будет ошибкой:

:link {...правила..} /*правильно*/
a:link {...правила...} /*правильно*/
p:first-line em {...правила...} /*ошибка*/

Об основах работы с селекторами CSS я написал ранее.
Теперь давайте рассмотрим селекторы, которые формируются на основе структуры документа (страницы HTML).

Структурные селекторы

Селектор-потомок или контекстный селектор
Это первый тип селектора, который мы рассмотрим. Благодаря этому типу селектора, можно применять стили к элементам, которые являются «потомками» по отношению к другим. Все, что вам нужно сделать, это написать различные элементы, разделив их пробелом, начиная от предка к потомку. Например так: