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