От автора: CSS селекторы, которые могут иметь решающее значение во время разработки. Они могут спасти от хаоса javascript, семантически организовать css и оптимизировать скорость загрузки сайта.
nth-child(-n)
Передавая отрицательное число n, вы указываете его вернуть все элементы перед этим числом и получите то, что мы можем назвать отрицательными дочерними диапазонами.
|
1 |
li:nth-child(-n+5) { color: red; } |
only-of-type
Этот структурный псевдо класс можно использовать по-разному. Он может применяться к элементам, которые являются единственными у родителя. К примеру, давайте выберем все ul, которые имеют только один элемент списка.
|
1 |
li:only-of-type { font-weight: bold; } |
Во-первых, спросите себя, как бы вы выполнили это задание? Вы могли бы применить ul li, но это задействует все элементы списка. Единственным решением является использование only-of-type.
first-line
Этот псевдо-элемент соответствует первой строке элементов block, inline-block, table-caption или table-cell.
|
1 |
p:first-line { color: blue; } |
Он особенно полезен, когда нужно добавить в текстовые блоки тонкие типографические детали, например, трансформировать первую строку статьи в капители. С ::first-line можно использовать только следующие свойства:
свойства шрифта
свойства цвета
свойства фона
интервал между словами
интервал между буквами
оформление текста
выравнивание по вертикали
преображение текста
высота строчки
сброс
first-letter
Псевдо-элемент :first-letter соответствует первой букве текстового элемента и создает буквицу:
|
1 |
p:first-letter { font-size: 4rem; } |
empty
Этот псевдо-класс представляет элемент, который не имеет внутри содержимого. Когда вы используете WYSIWYG редактор элементов управления, то у вас в отображенном HTML может быть много
. Если вы не хотите, чтобы элементы empty выводились на странице:
|
1 |
p:empty { display: none; } |
not()
Псевдо-селектор :not применяется, если считается верным селектор противоположный данному.
|
1 |
body:not(.touch) a:hover { color: green; } |
checked
Вы можете использовать псевдо-селектор :checked , чтобы выбрать любой выбранный элемент. Он пригодится тогда, когда вы захотите узнать, какой элемент в выпадающем списке выбран на данный момент.
|
1 |
form select > option:checked { color: green; } |
lang()
:lang() это CSS-селектор псевдо-класса, который соответствует элементу, основанному на определенном языке. Язык определяется в HTML с использованием комбинации атрибута lang (например, ), тэга и, возможно, информации из протокола (такого как HTTP заголовки).
|
1 |
html:lang(de) .element > label { font-size: 0.85rem } |
[attr=value]
Селекторы атрибутов позволяют выбрать элемент, основываясь на его атрибутах. Вы можете задать целевые элементы, которые содержат в атрибутах различные значения. Ниже приведены 6 разных типов селекторов атрибутов:
[attr=value] Атрибут должен иметь точно заданное значение.
[attr~=value] Значение атрибута должно быть списком разделенных пробелами слов (например, class=“title featured home”), и одно из слов как раз является заданным значением.
[attr|=value] Значение атрибута – это “value” или оно начинается со слова “value”, после которого сразу же следует “-”, так что оно выглядит так: “value-”.
[attr^=value] Значение атрибута начинается с заданного значения.
[attr$=value] Значение атрибута заканчивается заданным значением.
[attr*=value] Значение атрибута содержит заданное значение.
|
1 |
a[href$=".pdf"] { background-image: url("icon-pdf.png"); } |
В этом примере мы использовали селектор атрибута, который задействует все ссылки (a) , атрибут href которых заканчивается ($) на .pdf.
Спасибо за внимание.
Автор: Pedro M. S. Duarte
Источник: //codeburst.io/
Редакция: Команда webformyself.
