Псевдоелементи в css

Відео: Псевдо Елементи

Дуже важливою особливістю CSS є псевдоелементи. Псевдоелемент - це якась характеристика стану об`єкта або його особливість. Наприклад, перша буква в абзаці (особливість), наведений курсор миші на об`єкт (стан). І ось таких псевдоелементів в CSS достатньо багато. Про них ми і поговоримо детально в даній статті.

Псевдоелементи в CSS дозволяють задавати особливий стиль для "незвичайних"Елементів. Давайте з Вами розберемо простий приклад:

Відео: Псевдоелементи в CSS (1/3)

img:hover { 
 border:2px solid # F00- // Встановлюємо червону рамку 
}

Даний код означає, що навколо зображення при наведенні на нього курсора миші буде з`являтися червона рамка товщиною 2 пікселя. Коли ж курсор миші буде йти з елемента, то рамка буде зникати. Завдяки псевдоелементи, здавалося б непросту задачу, ми вирішили дуже легко і без використання jаvascript, що взагалі прекрасно.

Всі решта псевдоелементи в CSS використовуються абсолютно також, тобто селектор, двокрапка і назва псевдоелемента.

Наводжу таблицю з різними псевдоелементи в CSS і їх описом.

псевдоелемент	опис
active	Стан "активного посилання", тобто посилання, на яку натискають.
firstchild	Можна застосувати стиль до першого дочірньому елементу.
first-letter	Перший символ в тексті елемента.
first-line	Перший рядок у тексті елемента.
focus	Для елемента в стані "фокус". Наприклад, текстове поле, в якому зараз набирають текст.
hover	Наведення на елемент курсора миші.
link	Визначає стан невідвіданих посилання.
visited	Визначає стан відвіданих посилання.

Це не все псевдоелементи, а лише ті, які, по-перше, у всіх браузерах працюють (за винятком IE6, де не все це працює), а також постійно використовуються верстальниками. Тому всі дані псевдоелементи Ви повинні знати прекрасно.

Відео: Псевдокласи і псевдоелементи в CSS

Сподіваюся, тепер деякі елементи Ви будете верстати з меншою кількістю тегів і властивостей, а також без використання jаvascript. Успіхів в освоєнні псевдоелементів в CSS!

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

Схожі