Css only child: :only-child — CSS: Cascading Style Sheets

Псевдокласс :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 сперва рассматриваются все единственные дочерние элементы у своих родителей, затем проверяется, относятся ли они к указанному типу.

Если эти два условия совпадают (в данном случае единственный элемент и элемент <h2>), тогда заголовок окрасится красным цветом. Поскольку <h2> не является единственным и кроме него есть другие элементы (<p> и <address>), то ничего выбрано не будет.

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 (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

91229.53. 11.5
2.11103.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:только дочерний {
  красный цвет;
} 

Например, если мы вкладываем абзацы в

вот так…

 

Этот абзац является единственным потомком своего родителя

<дел>

Этот абзац является первым дочерним элементом своего родителя

Этот абзац является вторым дочерним элементом своего родителя

Теперь мы можем стилизовать только

нашего первого потомка

.
Последующий
и его дочерние элементы никогда не будут стилизованы, поскольку родительский контейнер содержит более одного дочернего элемента (т. е. теги p).

 р: единственный ребенок {
  красный цвет;
} 

Мы также можем смешать дополнительные псевдоклассы, как в этом примере, который выбирает первый абзац в нашем вложенном div и единственный дочерний элемент div.contain .

 <дел>
  <дел>
    

Привет, мир

еще немного детей

 div.contain div: only-child: first-child {
  красный цвет;
} 

:only-child не будет работать как селектор, если ваш родительский элемент содержит более одного дочернего элемента с идентичным тегом. Например…

 
<дел>

Дочерний раздел 1

абзац 2

абзац 3

<дел>

Дочерний раздел 2

абзац 2

абзац 3

<дел>

Дочерний раздел 3

абзац 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.

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

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