Наименее используемые селекторы CSS

Наименее используемые селекторы CSS

От автора: 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 разных типов селекторов атрибутов:

[attr=value] Атрибут должен иметь точно заданное значение.

[attr~=value] Значение атрибута должно быть списком разделенных пробелами слов (например, class=“title featured home”), и одно из слов как раз является заданным значением.

[attr|=value] Значение атрибута – это “value” или оно начинается со слова “value”, после которого сразу же следует “-”, так что оно выглядит так: “value-”.

[attr^=value] Значение атрибута начинается с заданного значения.

[attr$=value] Значение атрибута заканчивается заданным значением.

[attr*=value] Значение атрибута содержит заданное значение.

a[href$=".pdf"] { background-image: url("icon-pdf.png"); }

В этом примере мы использовали селектор атрибута, который задействует все ссылки (a) , атрибут href которых заканчивается ($) на .pdf.

Спасибо за внимание.

Автор: Pedro M. S. Duarte

Источник: https://codeburst.io/

Редакция: Команда webformyself.