MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

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

Только некоторые свойства CSS можно использовать с псевдоэлементом :: selection: 

Только некоторые свойства CSS можно использовать с псевдоэлементом :: selection: color, background-color, cursor, outline, text-decoration, text-emphasis-color, и text-shadow

Обратите внимание, что, в частности, background-image игнорируется.

 

text-shadow in ::selection is supported by Chrome, Safari and Firefox 17+.

Though this pseudo-element was in drafts of CSS Selectors Level 3, it was removed during the Candidate Recommendation phase, as it appeared that its behavior was under-specified, especially with nested elements, and interoperability wasn't achieved (based on discussion in the W3C Style mailing list).

The ::selection pseudo-element has been added again in Pseudo-Elements Level 4.

Синтаксис

/* Firefox syntax */
::-moz-selection

::selection

Пример

HTML

<div>Выделите этот текст, чтобы увидеть применение специальных стили</div>
<p>Также попробуйте проделать это и с этим текстом</p>

CSS

/* Make selected text gold on a red background */
::-moz-selection {
  color: gold;
  background: red;
}

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

/* Make selected text in a paragraph white on a blue background */
p::-moz-selection {
  color: white;
  background: blue;
}

p::selection {
  color: white;
  background: blue;
}

Result

Specifications

Specification Status Comment
CSS Pseudo-Elements Level 4
Определение '::selection' в этой спецификации.
Рабочий черновик Initial definition

The ::selection CSS pseudo-element was drafted for CSS Selectors Level 3 but removed before it reached the Recommendation status. It was re-added as part of the Pseudo-Elements Level 4 draft.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1 (Да) 1.0 -moz[1] 9 9.5 1.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? (Да) ? ? ? ?

[1] Gecko currently only supports the prefixed version ::-moz-selection. It will be unprefixed in баг 509958.

Метки документа и участники

 Внесли вклад в эту страницу: karpulix
 Обновлялась последний раз: karpulix,