:only-of-type¶
Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя.
Синтаксис¶
/* Выбирает все , которые являются */
/* единственным потомками типа */
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 ноября 2018time> p> article> Псевдокласс :only-of-type без указания селектора выберет все единственные элементы каждого типа внутри и установит для них красный цвет текста. Здесь единственными являются элементы , и .
article :only-of-type color: red; > При добавлении селектора к :only-of-type сперва рассматривается указанный элемент, затем проверяется, является ли он единственным. Здесь красным цветом будет выделен заголовок, поскольку только один.
article h1:only-of-type color: red; > Если вместо h1 использовать селектор 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¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
html> head> meta charset="utf-8" /> title>only-of-typetitle> 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 , в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это
) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не действует, во второй строке вставлено одно изображение, для него :only-of-type и работает.
См. также¶
Ссылки¶
Псевдокласс :only-of-type
Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя.
В качестве примера рассмотрим следующий код HTML:
Роль цитокинов при дорсалгии
Автор: Гордон Фримен, канд. физ.-мат. наук
Содержание статьи
Почта: freemen@blackmesa.com Опубликовано:
Псевдокласс :only-of-type без указания селектора выберет все единственные элементы каждого типа внутри и установит для них красный цвет текста. Здесь единственными являются элементы , и .
При добавлении селектора к :only-of-type сперва рассматривается указанный элемент, затем проверяется, является ли он единственным. Здесь красным цветом будет выделен заголовок, поскольку только один.
Если вместо h1 использовать селектор p , то ничего выбрано не будет, поскольку внутри встречается несколько абзацев и элемент
не является единственным.
Вместо :only-of-type можно использовать комбинации :first-of-type:last-of-type или :nth-of-type(1):nth-last-of-type(1) .
Синтаксис
Синтаксис
| Описание | Пример | |
|---|---|---|
| Указывает тип значения. | ||
| A && B | Значения должны выводиться в указанном порядке. | && |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,]* |
| + | Повторять один или больше раз. | + |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| Повторять не менее A, но не более B раз. | ||
| # | Повторять один или больше раз через запятую. | # |
Пример
В примере псевдокласс :only-of-type применяется к селектору img , в правилах стиля которого задаётся рамка красного цвета для картинок. Сама рамка добавляется к изображениям, которые у своих родителей (в данном случае это
) встречаются только один раз. В первой строке повторяется два изображения, поэтому псевдокласс не действует, во второй строке вставлено одно изображение, для него :only-of-type и работает.
Рис. 1. Применение псевдокласса :only-of-type к картинкам
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
См. также
CSS псевдокласс :only-of-type
Псевдокласс :only-of-type выбирает каждый элемент, который является единственным дочерним элементом определённого типа внутри своего родительского элемента (отсутствует элементы такого же типа внутри родительского элемента).
Поддержка браузерами
| Селектор | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|
| :only-of-type | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
CSS синтаксис:
:only-of-type блок объявлений; > Версия CSS
Пример использования
Псевдокласс :only-of-type type = "text/css"> .img:only-of-type border: 3px solid orange; > img width: 100px; height: 100px; > Блок, который подподает под условия селектора :only-of-type src = "nich.jpg" alt = "nich">
src = "nich.jpg" alt = "nich"> src = "nich.jpg" alt = "nich"> В нашем примере, только первый блок (родительский элемент ) содержит одно изображение, которое и было стилизовано.
Главное отличие псевдокласса :only-of-type от :only-child, заключается в том, что при использовании :only-of-type учитывается количество элементов одного типа, а при использовании :only-child количество элементов (независимо каких типов).
В нашем примере первый блок содержит абзац (элемент — ) при этом стиль применяется к изображению, независимо от сторонних элементов, в случае с псевдоклассом :only-child ни одно изображение не было бы стилизовано, по причине отсутствия подходящих условий.
CSS селекторы
© 2016-2023 Денис Большаков, замечания и предложения по работе сайта Вы можете направить по адресу basicweb.ru@gmail.com
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.
