Псевдоклас: not в css3.

Відео: [CSS 3] Урок 4. Псевдоселектори

Всім привіт. Сьогодні я розповім про псевдоклас not (), що з`явився в CSS3.

псевдоклас not, як зрозуміло з його назви, все заперечує. Давайте розглянемо на прикладі.

class="Test"gt;Якийсь текст 
class="Block"gt;Ще один текст

Отже, у нас є параграф з класом test і з класом block. Щоб застосувати стиль, наприклад, до всіх параграфів, які не мають класу test, потрібно прописати наступне:

Відео: Всі CSS селектори в одному уроці

p:not(.test){ color: blue-}

Тепер параграф з класом block буде синім кольором, а параграф з класом test - немає. Заперечувати можна не тільки класи, а й все інше. наприклад, атрибути.

type="Text"readonlygt; 
type="Text"gt;

У нас є текстовий елемент форми, у якого є атрибут readonly, і є інший текстовий елемент форми, у якого цього атрибута немає. Ми вирішили застосувати стиль до всіх елементів форми, у яких немає цього атрибута. Для цього пропишемо наступне:

Відео: Верстка макета. HTML атрибут class або селектор CSS класів

input:not([readonly]){ 
 border:1px solid green- 
}

Ось така проста, але корисна властивість. Сподіваюся, кому-небудь стане в нагоді. Дякую за увагу і до наступної статті!

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

Схожі