:only-of-type¶
Псевдокласс :only-of-type
применяется к дочернему элементу указанного типа, только если он единственный у родителя.
Псевдоклассы
- :active
- :any-link
- :blank
- :checked
- :current()
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host()
- :host-context()
- :hover
- :indeterminate
- :in-range
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :not()
- :nth-child()
- :nth-col()
- :nth-last-child()
- :nth-last-col()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :placeholder-shown
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :target
- :target-within
- :user-invalid
- :valid
- :visited
- :where()
Синтаксис¶
/* Выбирает все <p>, которые являются */
/* единственным потомками типа <p> */
p:only-of-type {
background-color: lime;
}
Описание¶
В качестве примера рассмотрим следующий код HTML:
<article>
<h1>Роль цитокинов при дорсалгии</h1>
<p>Автор: Гордон Фримен, канд. физ.-мат. наук</p>
<p>Содержание статьи</p>
<address>Почта: [email protected]</address>
<p>
Опубликовано:
<time datetime="2018-11-27">27 ноября 2018</time>
</p>
</article>
Псевдокласс :only-of-type
без указания селектора выберет все единственные элементы каждого типа внутри <article>
и установит для них красный цвет текста. Здесь единственными являются элементы <h1>
, <address>
и <time>
.
article :only-of-type {
color: red;
}
При добавлении селектора к :only-of-type
сперва рассматривается указанный элемент, затем проверяется, является ли он единственным. Здесь красным цветом будет выделен заголовок, поскольку <h1>
только один.
article h1:only-of-type {
color: red;
}
Если вместо h1
использовать селектор p
, то ничего выбрано не будет, поскольку внутри <article>
встречается несколько абзацев и элемент <p>
не является единственным.
article p:only-of-type {
color: red;
}
Вместо :only-of-type
можно использовать комбинации :first-of-type:last-of-type
или :nth-of-type(1):nth-last-of-type(1)
.
Спецификации¶
Примеры¶
Пример 1¶
<main>
<div>Я `div` №1.</div>
<p>Я тут единственный `p` елемент.</p>
<div>Я `div` №2.</div>
<div>
Я `div` №3.
<i>Я единственный потомок типа `i`.</i>
<em>Я `em` №1.</em>
<em>Я `em` №2.</em>
</div>
</main>
main :only-of-type {
color: red;
}
Пример 2¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>only-of-type</title>
<style>
img:only-of-type {
border: 2px solid red; /* Параметры рамки */
}
</style>
</head>
<body>
<p>
<img src="image/figure.jpg" alt="" />
<img src="image/figure.jpg" alt="" />
</p>
<p><img src="image/figure.jpg" alt="" /></p>
</body>
</html>
В примере псевдокласс :only-of-type
применяется к селектору img
, в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это <p>
) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не действует, во второй строке вставлено одно изображение, для него :only-of-type
и работает.
См. также¶
Ссылки¶
- Псевдо-класс
:only-of-type
MDN (рус.)