Пseudo-элементы CSS

Chto takoe dvigatelnyy element?

CSS dvigatelnye elementy ispol'zuutsya dlya nastroiki stilya opredelennyh chastey elementa.

Naruzhno, to est' on mozhno ispol'zovat':

  • Nastroyka stilya pervoy bukvy i pervoy stroki elementa
  • Vstavka konteksta priyomnoy elementa pered ili posle sostoyaniya konteksta

Grammatika

Grammatika dvigatelnyh elementov:

selector::pseudo-element {
  property: value;
}

::first-line dvigatelnyy element

::first-line Dvigatelnye elementy ispol'zuutsya dlya pridaniya special'nogo stilya pervoy stroki teksta.

Следующий пример pridavaet stil' pervoy stroki v vsekh elementah <p>:

Пример

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Попробуйте сами

Vнимание:::first-line Dvigatelnye elementy primenyayutsya tol'ko k dvigatelnym elementam.

Следующие propertiya primenyayutsya k ::first-line Dvigatelnye elementy:

  • Пропertiya shrifta
  • Пропertiya cveta
  • Пропertiya fonda
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Obratite vниманиеDvoynyy dvigatel - ::first-line Sravnenie :first-line

V CSS3 dvigatelnyy element zamenyal edinyy dvigatel dvoynym dvigatelem. Eto pospyanka W3C ispytyvaet razdelit'Dvigatelnaya klasaIDvigatelnyy elementPospyanka.

V CSS2 i CSS1 dvigatelnye elementy i dvigatelnye klasy ispol'zuutsya edinyy dvigatel.

Dlya vosstanovleniya sobstvennosti, CSS2 i CSS1 dvigatelnye elementy prinimayut edinyy dvigatel.

::first-letter dvigatelnyy element

::first-letter Dvigatelnye elementy ispol'zuutsya dlya pridaniya special'nogo stilya pervoy bukve teksta.

Следующий пример ustanavlivayet format pervoy bukvy teksta v vsekh elementah <p>:

Пример

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Попробуйте сами

Vнимание:::first-letter Dvigatelnye elementy primenyayutsya tol'ko k dvigatelnym elementam.

Следующие пропertiya primenyayutsya k dlya dvigatelnoy elementa ::first-letter:

  • Пропertiya shrifta
  • Пропertiya cveta
  • Пропertiya fonda
  • Пропertiya vonnogo otstanda
  • Пропertiya vnutrennego otstanda
  • Пропertiya ramki
  • text-decoration
  • vertical-align (только когда "float" равно "none")
  • text-transform
  • line-height
  • float
  • clear

Дополнения и CSS-классы

Дополнения могут использоваться в сочетании с CSS-классами:

Пример

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Попробуйте сами

В приведенном выше примере первая буква абзаца с классом "intro" будет отображаться красным и с увеличенным шрифтом.

Множественные дополнения

Также можно комбинировать несколько дополнений.

В следующем примере первая буква абзаца будет красного цвета, размер шрифта xx-large. Оставшаяся часть первой строки будет голубого цвета и будет использовать малые заглавные буквы. Оставшаяся часть абзаца будет по умолчанию размером шрифта и цветом:

Пример

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Попробуйте сами

CSS - дополнение ::before

::before Дополнения могут использоваться для вставки содержимого перед элементом.

В следующем примере изображение вставляется перед содержимым каждого элемента <h1>:

Пример

h1::before {
  content: url(smiley.gif);
}

Попробуйте сами

CSS - дополнение ::after

::after Дополнения могут использоваться для вставки содержимого после элемента.

В следующем примере изображение вставляется после содержимого каждого элемента <h1>:

Пример

h1::after {
  content: url(smiley.gif);
}

Попробуйте сами

CSS - дополнение ::selection

::selection дополнениям CSS, соответствующим части выбранного пользователем элемента.

Следующие CSS-атрибуты могут применяться к ::selection:

  • color
  • background
  • cursor
  • outline

Ниже приведен пример, который显示了所选文本在黄色 фоне с красным цветом:

Пример

::selection {
  color: red; 
  background: yellow;
}

Попробуйте сами

Все CSS-дополнения

Выборщик Пример Описание примера
::after p::after Вставьте содержимое после каждого элемента <p>.
::before p::before Вставьте содержимое перед каждым элементом <p>.
::first-letter p::first-letter Выберите первую букву каждого элемента <p>.
::first-line p::first-line Выберите первую строку каждого элемента <p>.
::selection p::selection Выберите часть элемента, выбранного пользователем.

Все CSS суррогаты

Выборщик Пример Описание примера
:active a:active Выберите активную ссылку.
:checked input:checked Выберите каждый выбранный <input> элемент.
:disabled input:disabled Выберите каждый отключенный <input> элемент.
:empty p:empty Выберите каждый <p> элемент без подэлементов.
:enabled input:enabled Выберите каждый включенный <input> элемент.
:first-child p:first-child Выберите каждый <p> элемент, который является первым ребенком своего родителя.
:first-of-type p:first-of-type Выберите каждый <p> элемент, который является первым ребенком своего родителя.
:focus input:focus Выберите <input> элемент, который имеет фокус.
:hover a:hover Выберите ссылку, над которой悬ится мышь.
:in-range input:in-range Выберите <input> элементы с значениями в указанном диапазоне.
:invalid input:invalid Выберите все <input> элементы с недопустимым значением.
:lang(language) p:lang(it) Выберите каждый <p> элемент с атрибутом lang, значение которого начинается с "it".
:last-child p:last-child Выберите каждый <p> элемент, который является последним ребенком своего родителя.
:last-of-type p:last-of-type Выберите каждый <p> элемент, который является последним ребенком своего родителя.
:link a:link Выберите все непосещенные ссылки.
:not(selector) :not(p) Выберите каждый элемент, который не является <p>.
:nth-child(n) p:nth-child(2) Выберите каждый <p> элемент, который является вторым ребенком своего родителя.
:nth-last-child(n) p:nth-last-child(2) Выберите каждый <p> элемент, который является вторым ребенком родителя, начиная с последнего ребенка.
:nth-last-of-type(n) p:nth-last-of-type(2) Выбрать каждый элемент <p>, являющийся вторым <p> своим родителем, начиная с последнего ребенка.
:nth-of-type(n) p:nth-of-type(2) Выбрать каждый элемент <p>, являющийся вторым <p> своим родителем.
:only-of-type p:only-of-type Выбрать каждый элемент <p>, являющийся единственным <p> своим родителем.
:only-child p:only-child Выбрать элемент <p>, являющийся единственным ребенком своего родителя.
:optional input:optional Выбрать элемент <input>, который не имеет атрибута "required".
:out-of-range input:out-of-range Выбрать элемент <input>, значение которого находится вне заданного диапазона.
:read-only input:read-only Выбрать элемент <input>, который指定атрибут "readonly".
:read-write input:read-write Выбрать элемент <input>, не имеющий атрибута "readonly".
:required input:required Выбрать элемент <input>,指定了 атрибут "required".
:root root Выбрать корневой элемент элемента.
:target #news:target Выбрать текущий активный элемент #news (нажмите на URL, содержащий это имя锚а).
:valid input:valid Выбрать все элементы <input>, имеющие действительное значение.
:visited a:visited Выбрать все посещенные ссылки.