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

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

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

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

<div>
    <h1>Major heading</h1>
    <p>Body text…</p>
</div>

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

div p:only-child { color: red; }

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

div p:only-of-type { color: red; }

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

div.wolf span.cub { ... }

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

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

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

figure img:only-of-type {
    width: 100%; 
    height: auto;
}

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

figure img:not(:only-of-type) {
    flex: 1;
}

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

<article></article>
<article></article>
<div>
  <article></article>
</div>

И код CSS:

article:only-of-type { 
    border: 1px solid red;
}

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

Поддержка

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

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

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

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

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree