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

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

От автора: CSS селекторы, которые могут иметь решающее значение во время разработки. Они могут спасти от хаоса javascript, семантически организовать css и оптимизировать скорость загрузки сайта.

nth-child(-n)

Передавая отрицательное число n, вы указываете его вернуть все элементы перед этим числом и получите то, что мы можем назвать отрицательными дочерними диапазонами.

only-of-type

Этот структурный псевдо класс можно использовать по-разному. Он может применяться к элементам, которые являются единственными у родителя. К примеру, давайте выберем все ul, которые имеют только один элемент списка.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Во-первых, спросите себя, как бы вы выполнили это задание? Вы могли бы применить ul li, но это задействует все элементы списка. Единственным решением является использование only-of-type.

first-line

Этот псевдо-элемент соответствует первой строке элементов block, inline-block, table-caption или table-cell.

Он особенно полезен, когда нужно добавить в текстовые блоки тонкие типографические детали, например, трансформировать первую строку статьи в капители. С ::first-line можно использовать только следующие свойства:

свойства шрифта

свойства цвета

свойства фона

интервал между словами

интервал между буквами

оформление текста

выравнивание по вертикали

преображение текста

высота строчки

сброс

first-letter

Псевдо-элемент :first-letter соответствует первой букве текстового элемента и создает буквицу:

empty

Этот псевдо-класс представляет элемент, который не имеет внутри содержимого. Когда вы используете WYSIWYG редактор элементов управления, то у вас в отображенном HTML может быть много

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

. Если вы не хотите, чтобы элементы empty выводились на странице:

not()

Псевдо-селектор :not применяется, если считается верным селектор противоположный данному.

checked

Вы можете использовать псевдо-селектор :checked , чтобы выбрать любой выбранный элемент. Он пригодится тогда, когда вы захотите узнать, какой элемент в выпадающем списке выбран на данный момент.

lang()

:lang() это CSS-селектор псевдо-класса, который соответствует элементу, основанному на определенном языке. Язык определяется в HTML с использованием комбинации атрибута lang (например, ), тэга и, возможно, информации из протокола (такого как HTTP заголовки).

[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.

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

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и научитесь верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree