Псевдокласс CSS :only-of-type

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

Конструкция p:only-of-type выбирает абзац только в том случае, если он является единственным абзацем внутри своего родительского элемента.

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

Версия

Selectors Level 3

Selectors Level 4

Синтаксис

Синтаксис CSS :only-of-type

css

:only-of-type {
  css declarations;
}

Пример использования селектора :only-of-type:

Пример кода CSS :only-of-type

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:only-of-type {
        background: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:only-of-type selector example</h2>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
    <div>
      <p>Lorem ipsum is simply dummy text.</p>
      <p>Lorem ipsum is simply dummy text.</p>
    </div>
  </body>
</html>

Try it Yourself »

Практика

Что представляет собой псевдокласс ':only-of-type' в CSS?

Псевдокласс ':only-of-type' представляет элемент, у которого нет элементов того же типа среди братьев и сестёр внутри родительского контейнера.Псевдокласс ':only-of-type' представляет целевой элемент, который является единственным дочерним элементом своего типа внутри родителя.Псевдокласс ':only-of-type' представляет элемент с определённым ID или классом внутри родительского контейнера.Псевдокласс ':only-of-type' представляет стилизованный элемент, который является единственным дочерним элементом своего типа в документе.

Псевдокласс CSS :only-of-type ​

Версия ​

Синтаксис ​

Пример использования селектора :only-of-type: ​

Практика ​

Псевдокласс CSS :only-of-type

Версия

Синтаксис

Пример использования селектора :only-of-type:

Практика