Cелектор (Від англ. Selector) - сортування, вибірка. Під селекторами, в мові CSS розуміється спосіб вибірки елементів (тегів) сторінки.
Cхема CSS-коду виглядає наступним чином:
Селектор {CSS-властивість: значення; CSS-властивість: значення; ... і т.д.}
Селектор служить для того, щоб однозначно визначити елемент в html документі, до якого ми хочемо застосувати той чи інший стиль CSS.
- Селектор по елементу;
- Селектор по класу;
- Селектор по id;
- Контекcтний селектор;
Селектор по елементу
До цього моменту, ми з вами працювали саме з цим селектором. В якості селектора використовувалося безпосередньо ім'я html елемента, до застосувався даний стиль. Тобто написавши клас, наприклад для параграфа (Р), всі параграфи на сторінці набували стиль даного класу.
p {
font-size: 12px
}
А якщо необхідно зробити перший параграф в одному стилі, другий в іншому, третій в третьому і.т.д. Тут на допомогу прийде селектор по класу.
Селектор по класу
«class» - це атрибут HTML-тега, він дуже зручний тим, що може застосовуватися до однотипних елементів.
Назва класу може бути будь якою, головне, щоб воно відповідало тому елементу, який описується CSS-правилом. Взагалі атрибут «class» вважається найголовнішим інструментом CSS.
При створенні CSS-правила крапка«.» перед ім'ям класу обов'язкова.
.green (
font-family: arial, verdana, sans-serif;
font-size: 12px;
color: green;
}
/* селектор .center вибере всі елементи, які мають клас center */
.center {
text-align: center;
}
Приклад застосування стилю оформлення по селектору класу:
See the Pen selector-class-css by kravets (@raisa69) on CodePen.
Застосування селектору класу до конкретного тегу:
See the Pen selector -class-css by kravets (@raisa69) on CodePen.
Селектор по ідентифікатору
Даний селектор застосовується якщо необхідно виділити один єдиний елемент, унікальний, відмінний від усіх інших в документі. Застосувати ідентифікатор з унікальним імям на веб-сторінці можна тільки один раз.
Наприклад, виділення першогой заголовку на сторінці певним чином:
html- частина:
<h1 id="firstheader"> Перший заголовок на сторінці
css - частина:
h1 #firstheader {color: red;
font-weight: bold;
text-align: center}
See the Pen selector -class-css by kravets (@raisa69) on CodePen.
Контекстний селектор
Це дуже корисна річ. Припустимо, є сторінка з таблицями і параграфами тексту, причому і в таблиці, і в параграфах зустрічаються виділені жирним шрифтом (strong) слова. Необхідно зробити так, щоб слова в параграфі, які виділені жирним, стали зеленого кольору:
p strong {color: green}
Тобто на початку p потім пробіл, потім strong, а вже потім стиль. Читається цей рядок приблизно так: якщо всередині елемента p є елемент strong, то елементу strong привласнити стиль зеленого кольору.
Вкладеність може бути будь-якого рівня. Ось ще приклад: «Якщо раптом всередині комірки таблиці (td), Зустрінеться параграф (p), всередині якого буде слово виділене жирним (strong), То нехай це слово стане червоним!
td p strong {color: red;}
Універсальний селектор
А що робити якщо потрібно надати одні і ті ж значення для всіх елементів веб-сторінки? Перерахувати всі теги через кому?
Зовсім не обов'язково, замість перерахувань всіх тегів варто просто вказати "*" - зірочку, за допомогою якої виділяються всі елементи веб-сторінки.
* {
font-family: Verdana;
}
Селектори нащадків та дочірні селектори
Сусідні селектори
Сусідніми називаються елементи web-сторінки, коли вони йдуть безпосередньо один за одним у коді документа. Синтаксис:
P + H { Опис правил стилю }
Для керування стилем сусідніх елементів використовується символ плюса (+), який встановлюється між двома селекторами P та H. Пробіли навколо плюса не є обов'язковими. Стиль при такому записі застосовується до елемента H, але тільки в тому випадку, якщо він є сусіднім елементу P і слід відразу після нього.
Приклад:
See the Pen child elements css by kravets (@raisa69) on CodePen.
Споріднені селектори
Споріднені селектори (сестринські, сіблінгові) дозволяють вибирати елементи HTML-сторінки, що є спорідненими по відношенню один до одного (тобто мають спільного батька і знаходяться на одному рівні).Дані селектори схожі на сусідні, але відрізняються тим, що стиль застосовується до всіх елементів обраного типу, а не лише до першого з них. Замість знака + використається символ тильда ~.
Приклад. У цьому прикладі стиль застосовується до всіх тегів <p>, які йдуть після тегу <h1> і знаходяться до закриваючого батьківського тега <div>:
See the Pen Споріднені селектори by kravets (@raisa69) on CodePen.
Дочірні селектори
Дочірнім називається елемент, який безпосередньо розташовується усередині батьківського елемента.
Синтаксис:P > H { Опис правил стиля }
Стиль застосовується до елемента H, лише коли він є дочірнім для елемента P.
Приклад:
See the Pen selector-parent-css by kravets (@raisa69) on CodePen.
Шпаргалка по селекторам
See the Pen CSS Шпаргалка by kravets (@raisa69) on CodePen.
Завдання 1
Завдання 2
у приведеному коді доповнити css- правило, яке призведе до такого результату:
See the Pen Селектори нащадків by kravets (@raisa69) on CodePen.
Завдання 3
Створити файл з css-правилами оформлення дочірніх елементів, в результаті дії якого буде отримано:
Завдання 4
Який колір буде у тексту списка в наступному коді?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Контекстні селектори</title>
<style>
ul li ul { color: green; }
ul ul { color: red; }
li span { color: blue; }
li li { color: fuchsia; }
ul span{ color: orange; }
</style>
</head>
<body>
<ul>
<li>
<ul>
<li><span>Перший</span></li>
<li><span>Другий</span></li>
<li><span>Третій</span></li>
</ul>
</li>
</ul>
</body>
</html>Завдання 5
Створіть HTML документ як показано нижче та стилізувати згідно зразка.
<h2>Привіт</h2> <p>це просто текст</p> <hr /> <p>але оформи його як слід</p>
Завдання 6
Стилізувати наступний код згідно малюнку:
1 2 3 | <p class="one"></p> <p class="two"></p> <p class="three"></p> |
Завдання 7
Стилізувати веб-сторінку, щоб отримати результат, наведений на малюнку:
Завдання 8
Диктант (озвучує стилізацію педагог)
See the Pen selector_task_dyktant by kravets (@raisa69) on CodePen.
