: только тип - CSS-хитрости

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

p:only-of-type ( color: red; )

Если перед селектором нет тега, он будет соответствовать любому тегу (например, :only-of-type). Если ему предшествует другой селектор, он будет сопоставлен на основе типа тега, которому соответствует селектор. Например, .example:only-of-typeбудет вести себя как p:only-of-typeif .exampleприменяется к элементу абзаца.

Простой пример

Один список содержит только один элемент списка. Другой список содержит три элемента списка. Мы можем настроить таргетинг на один элемент списка :only-of-type.

Посмотрите на эту ручку!

Хотя, возможно, это не лучший пример, потому что он :only-childбудет работать так же хорошо, поскольку элементы списка являются единственными возможными дочерними элементами списков. Если мы используем вместо этого div, мы могли бы нацелить абзац внутри div, если это единственный абзац, несмотря на то, что там есть и другие элементы.

Посмотрите на эту ручку!

Отметить

Помимо забавы, вы можете добиться того же выбора, что и :only-of-typeс помощью :first-of-type:last-of-typeили :nth-of-type(1):nth-last-of-type(1). Однако они используют два связанных селектора, что означает, что их специфичность вдвое больше, чем у :only-of-type.