Красивые и уникальные снежинки: как работать с селектором :only-of-type

Красивые и уникальные снежинки: как работать с селектором :only-of-type

От автора: селектор only-of-type является логическим продолжением CSS селекторов empty и only-child. Данный селектор выбирает один экземпляр конкретного элемента в определенном контексте.

Селектор only-child проверяет, чтобы искомый элемент был внутри контейнера, а селектор only-of-type смотрит, чтобы элемент такого типа был единственным в данном контексте. Рассмотрим разметку:

CSS код ниже не изменит стиль параграфа:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

… так как параграф не единственный дочерний элемент у родителя div. А вот селектор only-of-type сделает цвет текста в параграфе красным:

… так как внутри DIV’а всего один тег параграфа. Селектор можно использовать на классах и других селекторах:

Элемент span с классом cub будет выбран в том случае, если это единственный тег span с таким классом внутри DIV’а с классом wolf.

Способы применения селектора only-of-type

Селектор only-of-type особенно удобно использовать для стилизации изображений в теге figure. Так как внутри таких тегов почти всегда присутствуют figcaption и img, only-child не подойдет. А вот селектор only-of-type будет самый раз. Если нам известно, что в контейнере только одно изображение, его можно адаптивно увеличить на 100% ширины его родителя:

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Если в figure больше одного изображения, можно использовать flexbox или другой способ для равномерного распределения элементов внутри контейнера. Можно воспользоваться инверсией при помощи селектора :not, чтобы определить, сколько изображений в теге figure (больше одного или нет):

Если у выбранного селектора нет родителя, only-of-type уберет из выборки все элементы, у которых есть смежные элементы того же типа на одном уровне. Разберем разметку:

И код CSS:

… рамка появится только у третьего тега article.

Поддержка

Селектор only-of-type поддерживается во всех современных браузерах, в том числе в IE9+ и более ранних версиях. К примеру, есть поддержка в Safari 3.1+. В IE8 поддержки нет.

Источник: http://thenewcode.com/

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

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

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на 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