Псевдокласс :only-child | CSS | WebReference
- Содержание
- Синтаксис
- Примечание
- Спецификация
- Браузеры
Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.
В качестве примера рассмотрим следующий код HTML:
<article> <h2>Роль цитокинов при дорсалгии</h2> <p>Автор: Гордон Фримен, канд. физ.-мат. наук</p> <p>Содержание статьи</p> <address>Почта: [email protected]</address> <p>Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time></p> </article>
Псевдокласс :only-child без указания селектора выберет все единственные элементы и установит для них красный цвет текста. Здесь единственным будет элемент <time>, поскольку он является единственным дочерним элементом у своего родителя <p>.
article :only-child { color: red; }
При добавлении селектора к :only-child сперва рассматриваются все единственные дочерние элементы у своих родителей, затем проверяется, относятся ли они к указанному типу.
article h2:only-child { color: red; }
Вместо :only-child можно использовать комбинации :first-child:last-child или :nth-child(1):nth-last-child(1).
Синтаксис
Селектор:only-child { ... }
Обозначения
Описание | Пример | |
---|---|---|
<тип> | Указывает тип значения. | <размер> |
A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
[ ] | Группирует значения. | [ crop || cross ] |
* | Повторять ноль или больше раз. | [,<время>]* |
+ | Повторять один или больше раз. | <число>+ |
? | Указанный тип, слово или группа не является обязательным. | inset? |
{A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
# | <время># |
Примечание
В Safari до версии 3.0 псевдокласс :only-child воспринимается как :first-child.
Спецификация
Спецификация | Статус |
---|---|
Selectors Level 4 | Рабочий проект |
Selectors Level 3 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
9 | 12 | 2 | 9.5 | 3. 1 | 1.5 |
2.1 | 1 | 10 | 3.1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Псевдоклассы
См. также
- :only-child и :only-of-type
- Псевдокласс :only-of-type
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 03. 08.2018
Редакторы: Влад Мержевич
child | HTML и CSS с примерами кода
Псевдокласс :only-child
применяется к дочернему элементу, только если он является единственным у родителя.
- :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()
Описание
В качестве примера рассмотрим следующий код HTML:
<article> <h2>Роль цитокинов при дорсалгии</h2> <p>Автор: Гордон Фримен, канд.физ.-мат. наук</p> <p>Содержание статьи</p> <address>Почта: [email protected]</address> <p> Опубликовано: <time datetime="2018-11-27">27 ноября 2018</time> </p> </article>
Псевдокласс :only-child
без указания селектора выберет все единственные элементы и установит для них красный цвет текста. Здесь единственным будет элемент <time>
, поскольку он является единственным дочерним элементом у своего родителя <p>
.
article :only-child { color: red; }
При добавлении селектора к :only-child
сперва рассматриваются все единственные дочерние элементы у своих родителей, затем проверяется, относятся ли они к указанному типу. Если эти два условия совпадают (в данном случае единственный элемент и элемент <h2>
), тогда заголовок окрасится красным цветом. Поскольку <h2>
не является единственным и кроме него есть другие элементы (<p>
и <address>
), то ничего выбрано не будет.
article h2:only-child { color: red; }
Вместо :only-child
можно использовать комбинации :first-child:last-child
или :nth-child(1):nth-last-child(1)
.
Примеры
Пример 1
HTMLCSSРезультат
<div> <span>Этот span единственный ребёнок своего папы:(</span> </div> <div> <span>Этот span один из потомков родителя</span> <span>Этот span один из детей отца</span> </div>
span:only-child { color: red; }
Пример 2
Пример со списком
HTMLCSSРезультат
<ol> <li> Первый <ul> <li>Это единственный ребёнок</li> </ul> </li> <li> Второй <ul> <li>Этот список с двумя элементами</li> <li>Этот список с двумя элементами</li> </ul> </li> <li> Третий <ul> <li>Этот список с тремя элементами</li> <li>Этот список с тремя элементами</li> <li>Этот список с тремя элементами</li> </ul> </li> <ol></ol> </ol>
li li { list-style-type: disc; } li:only-child { color: #6699ff; font-style: italic; list-style-type: square; }
См.
также:only-of-type
Ссылки
- Псевдо-класс
:only-child
MDN (рус.)
: единственный ребенок | CSS-трюки — CSS-трюки
DigitalOcean предоставляет облачные продукты для каждого этапа вашего путешествия. Начните с бесплатного кредита в размере 200 долларов США!
Свойство селектора псевдокласса :only-child
в CSS представляет элемент, который имеет родительский элемент и чей родительский элемент не имеет других дочерних элементов. Это будет то же самое, что и :first-child:last-child
или :nth-child(1):nth-last-child(1)
, но с более низкой специфичностью.
div p:только дочерний { красный цвет; }
Например, если мы вкладываем абзацы в Этот абзац является единственным потомком своего родителя Этот абзац является первым дочерним элементом своего родителя Этот абзац является вторым дочерним элементом своего родителя Теперь мы можем стилизовать только Мы также можем смешать дополнительные псевдоклассы, как в этом примере, который выбирает первый абзац в нашем вложенном div и единственный дочерний элемент Привет, мир еще немного детей абзац 2 абзац 3 абзац 2 абзац 3 абзац 2 абзац 3
нашего первого потомка р: единственный ребенок {
красный цвет;
}
div.contain
. <дел>
<дел>
div.contain div: only-child: first-child {
красный цвет;
}
:only-child
не будет работать как селектор, если ваш родительский элемент содержит более одного дочернего элемента с идентичным тегом. Например…
Дочерний раздел 1
Дочерний раздел 2
Дочерний раздел 3
div. contain div: only-child { красный цвет; }
Это приведет к тому, что ни один элемент div не унаследует красный цвет, поскольку родительский элемент содержит более 1 дочернего элемента (3 безымянных элемента div).
Связанные свойства
- :только тип
- :последний тип
- :n-й ребенок
- :n-последний ребенок
Другие ресурсы
- W3C CSS 2.1 Spec
- W3C Селекторы CSS уровня 3, спецификация
- MDN Документы
- Документы веб-платформы
- точка сайта
Browser Support
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
4 | 3.5 | 9 | 12 | 3. 2 |
Мобильный телефон/планшет
Android Chrome | Android Firefox | Android | IOS Safari |
---|---|---|---|
108 | 107 | 2,1 | 3,2 |
. only-child с синтаксисом и примерами. Описание
Селектор CSS :only-child позволяет выбрать элемент, который является единственным дочерним элементом внутри своего родителя.
Синтаксис
Синтаксис для селектора CSS :only-child:
element:only-child { style_properties }
Параметры или аргументы
- element
- Единственный дочерний элемент этого типа внутри своего родителя.
- style_properties
- Стили CSS для применения к единственному дочернему элементу.
Примечание
- Селектор :only-child — это псевдокласс, который позволяет вам нацеливаться на элемент, который является единственным дочерним элементом внутри своего родителя.
- См. также селекторы :first-child, :last-child, :nth-child и :nth-last-child.
Совместимость с браузерами
Селектор CSS :only-child имеет базовую поддержку следующих браузеров:
- Chrome
- Андроид
- Firefox (Геккон)
- Firefox Mobile (Геккон)
- Internet Explorer 9+ (IE 9+)
- Телефон IE 9+
- Опера 9.5+
- Opera Mobile 10+
- Сафари (веб-кит)
- Сафари Мобильный
Пример
Мы обсудим селектор :only-child ниже, исследуя примеры использования этого селектора в CSS для применения стилей к единственному дочернему элементу.
С тегом
Давайте посмотрим на пример CSS :only-child, где мы применяем селектор :only-child к тегу .
CSS будет выглядеть следующим образом:
span:only-child { color: red; размер шрифта: 22px; }
HTML-код будет выглядеть так:
Вот два сайта techonthenet.com и checkyourmath.com.
Здесь только 1 сайт bigactivities.com.
Результат будет выглядеть следующим образом (селектор :only-child стилизует теги следующим образом):
В этом примере CSS :only-child первый тег
содержит более одного тега , поэтому эти теги не настраиваются селектором :only-child. Второй тег содержит только один тег , поэтому он будет оформлен селектором :only-child. Цвет текста внутри этого тега span bigactivities.com будет отображаться большим красным шрифтом.
С тегом
Давайте посмотрим на пример CSS :only-child, где мы применяем селектор :only-child к тегу
.
CSS будет выглядеть так:
p:only-child { background: yellow; }
HTML будет выглядеть так:
TechOnTheNet. com предоставляет полезные справочные материалы, инструкции и ответы на часто задаваемые вопросы с 2003 года. Мы уделяем особое внимание таким технологиям, как Microsoft Access, Microsoft Excel, Microsoft Word, SQL, Oracle/PLSQL, MySQL, HTML, CSS и C. Язык.
<дел>
Представленная здесь информация подходит для всех программистов, от новичка до эксперта.
Мы надеемся, что вы найдете эту информацию полезной и вернетесь на наш сайт, поскольку мы расширяем нашу информационную базу.
Результат будет выглядеть следующим образом (селектор :only_child стилизует теги
следующим образом):
В этом примере CSS :only-child первый тег
содержит только один тег таким образом, он будет оформлен селектором :only-child, задающим цвет фона в пределах .Это единственный абзац в этом div
, отображаемый желтым цветом. Второй тег
содержит более одного тега, поэтому эти теги
не настраиваются селектором :only-child.