CSS псевдоэлементы и селекторы атрибутов

Селекторы псевдоэлементов
Псевдоэлемент ::first-letter
Псевдоэлемент ::first-line
Псевдоэлементы ::before и ::after
Селекторы атрибутов

Селекторы псевдоэлементов

Псевдоэлементы позволяют стилизовать определенные части документа. Например псевдоэлемент ::first-line предназначен для добавления стилей только к первой строке указанного элемента. В спецификации CSS3 псевдоэлементы начинаются с двойного двоеточия — :: :

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

Двойное двоеточие было введено в CSS3 для визуального различия псевдоклассов и псевдоэлементов. Однако, псевдо-элементы, которые были добавлены еще в CSS2 (такие как: first-letter, first-line, before и after), могут быть записаны и с одним двоеточием, такой синтаксис использовался до появления спецификации CSS3 и поддерживается всеми браузерами. Синтаксис с двойным двоеточием поддерживается только в новых версиях браузеров и в обязательном порядке должен применяться только к псевдоэлементу ::selection, который был добавлен в CSS3.

Примечание: каждый селектор может содержать только один псевдоэлемент, который должен быть определен в самом конце селектора:

#header .menu span::first-letter { color: green; }

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

Псевдоэлемент ::first-letter позволяет применить стиль к первой букве в тексте родительского элемента. Например, для стилизации первой буквы в абзаце нам бы пришлось заключить ее в элемент <span> и применить стиль к нему:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  .firstletter {
	    font-size: 150%;
		font-weight: bold;
	  }
    </style>
  </head>
  <body>
    <p><span class="firstletter">Н</span>аш текст</p>
  </body>
</html>

Попробовать »

Или мы можем стилизовать первую букву в тексте с помощью псевдоэлемента ::first-letter, в этом случае нам не придется добавлять лишний элемент в HTML-разметку:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
	  p::first-letter {
	    font-size: 150%;
		font-weight: bold;
	  }
    </style>
  </head>
  <body>
    <p>Наш текст</p>
  </body>
</html>

Попробовать »

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

Псевдоэлемент ::first-line применяет стиль к первой строке текста в элементе:

p { width: 200px; }
p::first-line { color: blue; }

Попробовать »

Особенность псевдоэлемента ::first-line состоит в том, что он будет стилизовать только первую строку, ширина которой будет зависеть от ширины элемента, то есть на более маленьких экранах или при уменьшении окна браузера будет меняться и ширина первой строки, но ее оформление будет оставаться неизменным.

Псевдоэлементы ::before и ::after

Для добавления генерируемого содержимого в документ используются псевдоэлементы ::before и ::after. С их помощью можно разместить генерируемое содержимое до и после содержимого в указанном элементе. Для определения содержимого, которое будет добавлено, используется CSS свойство content.

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

a { 
  text-decoration: none;
  color: black;
}
a::before { content: url("link.png"); }

Попробовать »

Селекторы атрибутов

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

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

img[alt] { border: 1px solid red; }

В примере, приведенном выше, правило будет применяться ко всем элементам <img>, имеющим атрибут alt. Но помимо простой выборки элементов по атрибутам, селекторы атрибутов позволяют выбирать элементы исходя из значения атрибута:

элемент[атрибут^="значение"] — селектор атрибута с совпадением по подстроке. Оператор ^= означает "начинается с ...".
элемент[атрибут$="значение"] — селектор атрибута с совпадением по подстроке. Оператор $= означает "заканчивается на ...".
элемент[атрибут*="значение"] — селектор атрибута с совпадением по подстроке. Оператор *= означает "содержит подстроку ...".

В качестве примера приведем оформление ссылок, ссылающихся на внешний ресурс, электронный адрес и файл с расширением .pdf:

a[href^="http:"] {
  padding-left: 20px;
  background-image: url("img1.png");
  background-repeat: no-repeat;
}
a[href^="mailto:"] {
  padding-left: 20px;
  background-image: url("img2.png");
  background-repeat: no-repeat;
}
a[href$=".pdf"] {
  padding-left: 20px;
  background-image: url("img3.png");
  background-repeat: no-repeat;
}

Попробовать »

В подобных ситуациях селекторы атрибутов полезно использовать для внесения привлекательных дополнений в дизайн ваших веб-страниц.