CSS селектори атрибутів, класів, елементів
Важливою перевагою CSS є можливість застосування стилів до всіх однотипних елементів сторінки. Щоб ефективно користуватися цією можливістю, потрібно добре розібратися зCSS селекторами. Селектор — це саме те, до чого застосовується якесь правило.
Існує декілька видів CSS селекторів. Перейдемо до розгляду цих видів та прикладів їх застосування.
Універсальний селектор
Універсальний селектор визначає стиль всіх елементів документа. Позначається символом зірочки (*). Наприклад, це визначає, що всі елементи матимуть червоний колір:
Селектори елементів
Коли пишуться стилі для HTML документа, то елементами виступають HTML теги (h1, p, img, a, body. ). Наприклад:
У цьому випадку всі заголовки першого рівня документа будуть мати шрифт Verdana, розмір 12px і сірий колір.
Селектори класів
Цей селектор дозволяє призначити стиль незалежно від типу елемента. Але для їх роботи потрібно додати деякі позначки в HTML код, а саме атрибут class з будь-яким значенням, яке ви використовуватимете при створенні CSS правила.
Припустимо, деякі зображення на сторінці обвести в рамку. Для цих зображень прописується атрибут class. Наприклад:
А у файлі стилів пишемо правило:
Цей клас можна застосовувати до багатьох елементів сторінки і не обов'язково лише до зображень. До одного HTML елементу можна застосувати відразу кілька класів, які пишуться через пропуск:
Селектори ідентифікаторів
Теж дозволяє призначити стильнезалежно від типу елемента. Але, на відміну від селектора класів, може використовуватися лише один раз. Позначається символом решітки (#). У тега прописується атрибут id. Наприклад:
Селектори атрибутів
Застосовуються для вибору елементів на підставі атрибутів, а також значень цих атрибутів.
Для вибору елемента за його атрибутом, незалежно від цього атрибута використовується наступна конструкція: [атрибут] . Наприклад, нам знадобилося відзначити червоною рамкою зображення, у яких заданий атрибут alt . Робимо так:
Можна вибрати лише теги, атрибути яких мають певне значення. Потрібно, наприклад, всіх тегів з атрибутом type , значення якого text , застосувати правило - розмір тексту 16px. Робиться так:
Якщо потрібно вибрати елементи, атрибут class яких містить слово img, то використовується такий код:
Якщо потрібно вибрати атрибут, значення якого починається з тексту:
Якщо потрібно вибрати атрибут, значення якого закінчується на якийсь текст:
Якщо потрібно вибрати атрибут, значення якого містить будь-який текст:
Селектори нащадків (контекстні селектори)
Селектори нащадків мають на увазі завдання правил тих елементів, що усередині якогось певного елемента. Зрозуміліше буде з прикладу. Допустимо потрібно виділити червоним кольором тільки ті посилання a, які знаходяться всередині параграфа p і є до нього дочірніми:
Тут уже обидві посилання будуть червоного кольору.
Селектори сестринських (сусідних) елементів
Для вибору сусідніх елементів, розташованих на одному рівні, що мають одного з батьків робимо так:
Сусідними у разі є теги strong і em , а як і em і a .
Селектори псевдокласів
Псевдоклас - це фантомний клас, наявність якого залежить від стану елемента або структури документа в цілому. Псевдокласи часто використовуються в елементах форм введення або завдання поведінки посилань або активних елементів.
Наприклад, потрібно змінити колір відвідуваних посилань:
Або, наприклад, змінити колір тексту при фокусі (встановленні курсору) на текстовому полі форми:
Псевдоелементи — це умовні фіктивні елементи, які є частиною існуючих елементів або додатково вводяться в документ. Селектор псевдоелементів і селектор псевдокласів, погляд синтаксису — це фактично те саме. Різниця тільки у вибраних елементах.
У CSS2 визначено 4 псевдоелементи: перша літера ( :first-letter ), перший рядок ( :first-line ) і застосування спеціальних стилів до ( :before )і після ( :after ) елемента.
Задамо, наприклад, першу літеру кожного абзацу свій стиль:
За допомогою селекторів можна досить легко створювати CSS-правила, що застосовуються до великої кількості аналогічних елементів.