:only-of-typeСелектор псевдо-клас в CSS є будь-який елемент , який не має братів і сестер даного типу.
p:only-of-type ( color: red; )Якщо жоден тег не передує селектору, він буде відповідати будь-якому тегу (наприклад :only-of-type). Якщо інший селектор передує йому, він буде збігатися на основі типу тегу, який відповідає селектору. Наприклад, .example:only-of-typeбуде поводитися так, як p:only-of-typeякщо .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.
Підтримка браузера
| Chrome | Сафарі | Firefox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Будь-який | Будь-який | Будь-який | Будь-який | IE9 + | Будь-який | Будь-який |