: лише типу - CSS-хитрощі

Зміст

: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.