Ви можете отримати доступ до так званих дочірніх елементів. Це ті, які безпосередньо підпорядковані іншим елементам. Це, безумовно, звучить трохи абстрактно, але можна гарно пояснити на прикладі.
<body> <p>Параграф 1</p> <p>Параграф 2</p> <p>Параграф 3</p> </body>
Тут body є батьківським елементом. Елементи p є дочірніми елементами body. На основі цієї інформації можна використовувати селектор дочірніх елементів.
body>p {
колір: синій;
}
Ця синтаксична конструкція встановлює всі абзаци, які є безпосередніми дітьми body, у синій колір.
Наступний приклад ще раз показує відмінності між двома інструкціями body p та body>p.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
body>p {
шрифтова родина:"Courier New", Courier, monospace;
розмір шрифту: 200%;
}
body p {
колір:#0066FF;
}
</style>
</head>
<body>
<p>Параграф 1</p>
<p>Параграф 2</p>
<p>Параграф 3</p>
<div>
<p>Параграф 4</p>
</div>
</body>
</html>Перші три визначені p-текстові абзаци є безпосередніми дітьми body. Інструкція body p призначає усім текстовим абзацам синій колір. body>p, натомість, діє виключно на перші три текстові абзаци. Тому ці абзаци відображаються також у великому шрифті.
Далі я хочу представити вам селектор дочірніх елементів. Цей селектор позначає елемент, який непосредствено слідує за іншим елементом і має однаковий батьківський елемент. Ще один приклад:
h1+p {
колір: синій;
}
Ця синтаксична конструкція встановлює колір тексту абзацу на синій. Проте це стосується тільки тих випадків, коли абзаць безпосередньо слідує за заголовком першого рівня.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
h1+p {
колір: синій;
}
</style>
</head>
<body>
<h1>Заголовок</h1>
<p>Параграф 1</p>
<h2>Заголовок</h2>
<p>Параграф 2</p>
<p>Параграф 3</p>
<div>
<p>Параграф 4</p>
</div>
</body>
</html>Подивіться результат у браузері.
Тільки перший абзац тут відображається синім кольором. Інші абзаци чорні. Це тому, що ці елементи p не йдуть після h1, а йдуть після h2.
Щодо наступних елементів, в CSS3 введено ще кілька можливостей. Тепер можна отримати доступ до всіх наступних елементів певного елемента. Приклад:
h1~p {
колір: червоний;
}
Ця синтаксична конструкція встановлює всі абзаци, які слідують за h1, на червоний колір.
До елементів можна звертатися не тільки безпосередньо. Можливий також доступ через атрибути елементів.
Ось деякі з цих селекторів:
• [att] – Елемент повинен містити лише атрибут. Чи передається значення, не має значення.
• a[href] – Позначаються всі гіперпосилання (<a href=…>). Це не стосується визначень якорів (<a name=…>).
• [align=left] – Позначає всі елементи, які мають значення left в атрибуті align.
• [attr~=value] – Потрібно позначити всі елементи, в яких значення є у списку значень, розділених пробілом.
• [attr|=value] – Позначає елемент, якщо вказане значення знаходиться на початку рядка, розділеного дефісом.
• img[width="200"] – Тут вказані усі графіки з шириною 200 пікселів.
Звісно, виникає питання, коли взагалі можуть знадобитися такі атрибутні селектори. Пригадайте, наприклад, форму та визначені в ній прапорці. Прапорці – як ви вже знаєте – визначаються через елемент введення даних. Проблемою тут є те, що елемент введення даних також використовується для визначення звичайних текстових полів для введення даних. Таким чином, через введення даних неможливо встановити різну форматування для прапорців та полів введення тексту. Саме в цьому місці діють атрибутні селектори. Для кращого розуміння краще погляньте на наступний приклад:
<body> Ім'я: <input type="text" id="name" /> <br /> Чоловік: <input type="checkbox" name="geschlecht" id="geschlecht" /> <br /> Жінка: <input type="checkbox" name="geschlecht" id="geschlecht" /> </body>
Тут було визначено різні формулярні елементи.
• поле введення тексту
• дві прапорці
Ці поля повинні мати формат.
input {
border:3px solid #000;
width: 10em;
}Полям надано рамку та ширину.
Проблема полягає в тому, що визначена ширина має застосовуватися лише до поля введення тексту, але не до прапорців. Однак через вибір елементу тут неможливо розрізнити різні типи полів. Щоб така розрізнення працювало, потрібно використовувати селектори атрибутів. Ось приклад того, як це може виглядати:
input[type="checkbox"] {
width: auto;
}
Вказаний селектор дійсно застосовується лише до тих елементів вводу, які мають комбінацію значень атрибуту type="checkbox".
Повторюваність
CSS тепер також надає можливість визначення повторень. Звісно, виникає питання, де це може бути корисним. Такі селектори корисні, наприклад, коли потрібно робити різнокольоровими кожен другий рядок таблиці. Перш ніж я представлю доступні селектори, ось дуже типовий приклад:
<ol id="sprachen">
<li>HTML</li>
<li>HTML5</li>
<li>CSS</li>
<li>CSS3</li>
<li>JavaScript</li>
<li>JScript</li>
<li>Java</li>
<li>PHP</li>
<li>Python</li>
</ol>
Це звичайний нумерований список. За допомогою CSS кожному третьому елементу списку має бути надано фоновий колір.
Для цього використовується селектор nth-child(). Цим селектором вибирається кожен n-те дитяче елемент.
#sprachen li:nth-child(3n) {
background-color: red;
}
Наступні селектори доступні:
• :root - За допомогою селектора :root обробляється корінь документа.
• :nth-child(n) - Керує кожним n-тим елементом всередині батьківського елемента. Цей селектор є корисним, коли потрібно відмінити кілька елементів. n - це постійне ключове слово, на яке можна застосовувати математичні операції. n можна вважати рівним 1.
• :nth-last-child(n) - Керує кожним n-тим елементом у елементі, при цьому діти пройдуться ззаду вперед.
• :nth-of-type(n)– Керує кожним n-тим елементом того ж типу HTML на тому ж рівні.
• :nth-last-of-type(n) - Керує кожним n-тим елементом на тому ж рівні, пройдись ззаду вперед.
• :first-child - Керує першим дитячим елементом всередині елемента.
• :last-child - Керує останнім дитячим елементом всередині елемента.
• :first-of-type - Керує першим елементом того ж типу HTML всередині батьківського елемента.
• :last-of-type - Керує останнім елементом того ж типу HTML всередині батьківського елемента.
• :only-child - Керує елементом, який не має співбрату та єдиний дитячий елемент у батьківському елементі.
• :only-of-type - Керує елементом, який не має співбратів того ж типу HTML, та єдиний елемент такого типу у батьківському елементі.
• :empty - Керує порожніми елементами.
Представлені селектори роблять роботу з HTML значно простішою, оскільки складні визначення класів належать минулому.
