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

Дата публикации: 2016-08-26

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

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

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

<div>

<h1>Major heading</h1>

</div>

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

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

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

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

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

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

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

div.wolf span.cub { ... }

1	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 img:only-of-type {

width: 100%;

height: auto;

}

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

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

figure img:not(:only-of-type) {

flex: 1;

}

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

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

<div>

</div>

И код CSS:

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

article:only-of-type {

border: 1px solid red;

}

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

Поддержка

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

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

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

Метки: css