Одним из интересных псевдоселекторов в CSS3 является ::selection . Он позволяет изменить стандартный системный цвет фона при выделении текста на странице веб-сайта. Также, можно изменить и цвет шрифта при выделении. Поддерживается большинством браузеров, но IE версии 9 и выше.
Рассмотрим применение этого псевдоселектора на примере.
Цвет фона при выделении текста меняется на КРАСНЫЙ
Цвет фона при выделении текста меняется на СИНИЙ
Цвет шрифта меняется на черный, а цвет фона меняется на ЖЕЛТЫЙ
Задаем класс “red” для параграфа
|
1
|
[crayon-5370d381409d4164265756 inline="true" ]<p class="red">Pellentesque vel dui sed orci faucibus iaculis. Suspendisse dictum magna id purus tincidunt rutrum. Nulla congue. Vivamus sit amet lorem posuere dui vulputate ornare. Phasellus mattis sollicitudin ligula. Duis dignissim felis et urna.</p>
|
[/crayon] Описываем класс “red” для параграфа и псевдоселектора
|
1
2
3
|
p.red::selection {
background: #ffb7b7;
}
|
Полный CSS код
Мы меняем цвет фона для красного и синего параграфов, а также допольнительно цвет шрифта для желтого. Добавляем -moz и -webkit для поддрежки другими браузерами.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
p.red::selection {
background: #ffb7b7;
}
p.red::-moz-selection {
background: #ffb7b7;
}
p.red::-webkit-selection {
background: #ffb7b7;
}
p.blue::selection {
background: #a8d1ff;
}
p.blue::-moz-selection {
background: #a8d1ff;
}
p.blue::-webkit-selection {
background: #a8d1ff;
}
p.yellow::selection {
background: #f2d119;
color:#000;
}
p.yellow::-moz-selection {
background: #f2d119;
color:#000;
}
p.yellow::-webkit-selection {
background: #f2d119;
color:#000;
}
|
В заключении хочется отметить, что псевдоселектор можно применять не только к параграфам и хедерам, но также и ко всему веб-сайту вцелом, задав необходимые параметры в body тэге.
