inuasparwil.ru

Псевдокласи css3 - only-child і only-of-type.

Псевдокласи CSS3 - only-child і only-of-type.

Всім привіт. Сьогодні ми поговоримо про 2 нових псевдокласу CSS3 - only-child і only-of-type.

Only Child

псевдоклас only-child застосовується до тих елементів, які єдині у своїх батьків.

Наприклад, у нас є список, де тільки один li.


Test

Поставимо таке стиль:

ul li:only-child {
color: blue-
}


Він спрацює. Однак, варто нам додати ще один li...


Test
Test

... і вже нічого не працює.

Only of Type




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

наприклад:

img:only-of-type {
border:3px dashed green-
}

HTML


src="#"alt=""gt;
src="#"alt=""gt;


src="#"alt=""gt;

Це стиль застосується до третього зображенню, тому що він один у батька.

Отже, на цьому все. Сьогодні ми розібрали два нових псевдокласу CSS3 - only-child і only-of-type.

Поділися в соціальних мережах:

Схожі
Новий css3 псевдоклас - nth-child.Новий css3 псевдоклас - nth-child.
Як отримати список дочірніх вузлів через domЯк отримати список дочірніх вузлів через dom
Як додати ефект переходу акордеону на чистому css3.Як додати ефект переходу акордеону на чистому css3.
Перевірка підтримки нововведень html5 і css3.Перевірка підтримки нововведень html5 і css3.
Навіщо потрібен псевдоклас target в css3.Навіщо потрібен псевдоклас target в css3.
Як зробити блоки зі слайдер ефектом на чистому css3.Як зробити блоки зі слайдер ефектом на чистому css3.
Вивчаємо sass. Стиль написання коду.Вивчаємо sass. Стиль написання коду.
Як зробити багаторівневе меню-аккордіон на css3.Як зробити багаторівневе меню-аккордіон на css3.
Як зробити ефект вдавленого тексту на css3.Як зробити ефект вдавленого тексту на css3.
Псевдокласи css3 для перевірки полів - valid і invalid.Псевдокласи css3 для перевірки полів - valid і invalid.
» » Псевдокласи css3 - only-child і only-of-type.