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;
}

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

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