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

Тег :only-of-type CSS з прикладом

Internet Explorer Chrome Opera Safari Firefox Android iOS
9.0+ 1.0+ 9.6+ 3.1+ 3.5+ 2.1+ 2.0+

Псевдоклас :only-of-type застосовується до дочірнього елемента вказаного типу, тільки якщо він єдиний у батька. Аналогічний до використання :first-of-type:last-of-type або :nth-of-type(1):nth-last-of-type(1).

Синтаксис

елемент:only-of-type { ... }

Приклад

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>only-of-type</title>
  <style>
   img:only-of-type {
    border: 2px solid red; /* Параметры рамки */
   }
  </style>
 </head> 
 <body> 
  <p><img src="images/figure.jpg" alt="">
     <img src="images/figure.jpg" alt=""></p>
  <p><img src="images/figure.jpg" alt=""></p>
 </body> 
</html>

У прикладі псевдоклас :only-of-type застосовується до селектора img, в правилах стилю якого задається рамка червоного кольору для зображень. Сама рамка додається до зображень, які у своїх батьків (у цьому випадку це тег <p>) зустрічаються лише один раз. У першому рядку повторюються два зображення, тому псевдоклас не діє, у другому рядку вставлено одне зображення, для нього :only-of-type працює.

Псевдокласы

Часті запитання

  • Q: Як використовувати псевдоклас :only-of-type в CSS?

    A: Псевдоклас :only-of-type вказує на елемент, який є єдиним зі свого типу серед дочірніх елементів батьківського елемента.

  • Q: Де можна використовувати псевдоклас :only-of-type в CSS?

    A: Псевдоклас :only-of-type можна використовувати в CSS для стилізації або вибору конкретного елемента, який є єдиним свого типу.

  • Q: Як відрізнити псевдоклас :only-child від псевдокласу :only-of-type в CSS?

    A: Псевдоклас :only-child вказує на единственного дочірнього елемента батька, в той час як :only-of-type вказує на єдиний елемент зі свого типу серед дочірніх елементів батька.

  • Q: Чи підтримує вибірка всіх браузерів псевдоклас :only-of-type?

    A: Так, псевдоклас :only-of-type підтримується всіма сучасними браузерами.

  • Q: Як використовувати псевдоклас :only-of-type в поєднанні з іншими селекторами в CSS?

    A: Псевдоклас :only-of-type можна комбінувати з іншими селекторами, наприклад, з класами або ідентифікаторами для точного вибору елемента на сторінці.