Доброго вечора шановні колеги, сьогодні ми вивчимо з Вами два додаткові селектораякі називаються дочірніми та сусідніми селекторами css. Більшою мірою можна обійтися і без них, однак, для вашого розвитку їх потрібно засвоїти, і іноді застосовувати, щоб вони залишалися у вашій пам'яті. Тому обговоримо, які селекториє сусідніми, а які дочірніми і розберемо з прикладу.
Дочірні селектори css- Елементи, які розташовуються всередині батьківського елемента. Приклад цього може бути наступним. Ми маємо блок, у якому знаходиться параграф, ще один блок та картинка. Ось ці три елементи є дочірніми. Якщо в дочірньому блоці знаходяться інші елементи, то вони вже не є дочірніми у першого блоку, а є дочірніми у блоку, в якому безпосередньо знаходяться. Сподіваюся, суть Ви вловили.
Сусідні селектори CSS
- елементи, що розташовуються один за одним у коді документа. Приклад цього такий. Ми має параграф і наступний за ним тег span. Все досить ясно, а нам лише лишилося розібрати все це на реальних прикладах.
Текст в абзаці
Текст у span
Вже не дочірній текст в абзаці
За допомогою стилів додамо однаковий результат для тега span
Div > span (
font-size: 200%;
}
p + span (
color: red;
}
Результат виконання коду в обох випадках буде застосовуватись до тегу span, т.к., він є дочірнім по відношенню до тегу divі наступним після тега p. Тому шрифт став у два рази більшим і червоного кольору. Тепер ми з Вами повністю розібралися з дочірніми та сусідніми селекторами в CSS, а Вам залишається лише зміцнювати свої знання на практиці до швидкого!
Синтаксис CSS нескладний, й у розуміння його не потрібно мати ступінь доктора у сфері IT. Однак, це одна з небагатьох популярних мов, яка не є логічною у самому прямому значенні цього слова. На відміну від інших мов веб-програмування, таких як JavaScript та PHP, у CSS проблеми не вирішуються за допомогою звичайної логіки. Алгоритми типу «якщо X, то зробити Y, інакше зробити Z» чи «вибрати все Y, потім зробити із нею X» неможливо знайти здійснено у мові, як CSS. Простіше кажучи, це мова, створена для оформлення, мова для дизайнерів, а не девелоперів. Деякі з досвідчених програмістів, з якими я працював, саме з цієї причини витрачали багато зусиль, щоб освоїти CSS.
Навчання CSS починається з класів та ID, а також з використання. та # для безпосереднього позначення елементів. Цього достатньо, щоб побудувати повнофункціональний веб-сайт, але це не досить гнучке рішення у разі повної зміни дизайну. Давайте подивимося на альтернативний підхід до управління такими важкодоступними елементами.
Сусідний споріднений комбінатор
Почнемо з селектора, який зручний у складних ситуаціях, - із сусіднього спорідненого комбінатора. Сусідний споріднений комбінатор позначається з'єднанням двох елементів за допомогою знака +:H1 + p
Це виділяє наступний p-елемент, розташований відразу після h1-елемента DOM. Типографічна теорія передбачає, що ми повинні використовувати відступи в параграфах тексту, але тільки якщо вони йдуть за іншим параграфом. На практиці це може бути використано, щоб зробити відступи у всіх параграфах, крім першого:
p + p (text-indent: 1em; )
Це набагато зручніше, ніж виділяти перший параграф за допомогою class=first. Три рядки, ніяких класів та повна підтримка браузерів. Якщо у вас є теги img, що стосуються наповнення сайту, всередині тегів p (як, власне, і слід робити), можна просто відсунути їх ліві поля назад за допомогою негативного значення -1em:
p + p img (margin-left: -1em;)
Досить просто, правда? А якщо нам захочеться виділити перший рядок усіх параграфів, які стоять відразу після заголовків, не змінюючи всіх інших параграфів? Знову ж таки ми можемо використовувати клас уявлення. Простий селектор, зроблений із сусіднього складового комбінатора, і псевдоелемент справляться із завданням:
h1 + p::first-line ( font-variant: small-caps; )
Примітка: псевдо-елемент:first-line прийнятий у CSS 2.1, у CSS 3 використовується запис::, щоб встановити різницю між псевдо-класами і псевдо-елементами.
Спадковий комбінатор
Звичайний протокол розмітки – це розміщення розділів у названому елементі в #page або #wrap:Влад Мержевич
Сусідні називаються елементи веб-сторінки, коли вони йдуть безпосередньо один за одним у коді документа. Розглянемо кілька прикладів відношення елементів.
Lorem ipsum dolor sit amet.
У цьому прикладі тег є дочірнім по відношенню до тегу
Оскільки він знаходиться усередині цього контейнера. Відповідно
Виступає як батько .
Lorem ipsum dolor sit amet.
Тут теги і ніяк не перекриваються і являють собою сусідні елементи. Те, що вони розташовані всередині контейнера Ніяк не впливає на їхнє ставлення. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Сусідними тут є теги і , а також і . При цьому і до сусідніх елементів не належать через те, що між ними розташований контейнер .
Для керування стилем сусідніх елементів використовується символ плюса (+), який встановлюється між двома селекторами. Загальний синтаксис є наступним.
Селектор 1 + Селектор 2 (Опис правил стилю)
Прогалини навколо плюса не обов'язкові, стиль при такому записі застосовується до Селектора 2, але тільки в тому випадку, якщо він є сусіднім для Селектора 1 і слідує відразу після нього.
У прикладі 11.1 показано структуру взаємодії тегів між собою.
Приклад 11.1. Використання сусідніх селекторів
HTML5 CSS 2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Результат прикладу показано на рис. 11.1.
Мал. 11.1. Виділення тексту кольором за допомогою сусідніх селекторів
У цьому прикладі відбувається зміна кольору тексту для вмісту контейнера , коли він розташовується відразу після контейнера . У першому абзаці така ситуація реалізована, тому слово "consectetuer" у браузері відображається червоним кольором. У другому абзаці, хоч і є тег , але по сусідству жодного тегу ні, тому стиль до цього контейнера не застосовується.
Розберемо більш практичний приклад. Часто виникає потреба в текст статті включати різні виноски та примітки. Зазвичай для цього створюють новий стильовий клас і застосовують його до абзацу, таким чином можна легко змінити вигляд тексту. Але ми підемо іншим шляхом і скористаємось сусідніми селекторами. Для виділення зауважень створимо новий клас, назвемо його sic і станемо застосовувати його до тегу
. Перший абзац після такого заголовка виділяється кольором тла та відступом (приклад 11.2). Вигляд решти абзаців залишиться незмінним.
Приклад 11.2. Зміна стилю абзацу
HTML5 CSS 2.1 IE Cr Op Sa Fx
Методи лову лева в пустелі
Метод послідовного перебору
Нехай лев має габаритні розміри L x W x H, де L – довжина лева від кінчика носа до пензлика хвоста, W – ширина лева, а H – його висота. Після чого пустелю розбиваємо на ряд елементарних прямокутників, розмір яких збігається із шириною та довжиною лева. Враховуючи, що лев може бути не суворо на заданій ділянці, а одночасно на двох з них, клітину для лову слід робити підвищеної площі, а саме 2L x 2W. Завдяки цьому ми уникнемо помилок, коли в клітці виявиться спійманим лише половина лева або, що гірше, тільки його хвіст.
Важливе зауваження
Для спрощення розрахунків хвіст як похибка виміру можна відкинути і не брати до уваги.
Результат цього прикладу показано на рис. 11.2.
Мал. 11.2. Зміна виду абзацу за рахунок використання сусідніх селекторів
У цьому прикладі текст відформатовано із застосуванням абзаців (тег
), але запис H2.sic + P встановлює стиль тільки для першого абзацу після тегу
у якого доданий клас з ім'ям sic .
Сусідні селектори зручно використовувати для тих тегів, яких автоматично додаються відступи, щоб самостійно регулювати величину відбивки. Наприклад, якщо поспіль йдуть теги
і , то відстань між ними легко регулювати саме за допомогою сусідніх селекторів. Аналогічна справа і для тегів, що йдуть поспіль. і
і
А також в інших подібних випадках. У прикладі 11.3 таким чином змінюється величина відступів між зазначеними тегами.
Приклад 11.3. Відступи між заголовками та текстом
HTML5 CSS 2.1 IE Cr Op Sa Fx
Заголовок 1
Заголовок 2
Абзац!
Оскільки при використанні сусідніх селекторів стиль застосовується лише до другого елементу, то розмір відступів зменшується рахунок включення негативного значення властивості margin-top . При цьому текст піднімається нагору, ближче до попереднього елемента.
Запитання для перевірки
1. Які теги у цьому коді є сусідніми?
Формула сірчаної кислоти:H 2 SO 4
І
- і
- і
- і
- і
2. Є наступний код HTML:
Велика теорема Ферма
X n+ Y n
= Z n
де n – ціле число > 2
Який текст виділиться червоним за допомогою стилю SUP + SUP ( color: red; ) ?
- Друга «n»
- Друга та третя «n».
На відміну від сусідніх використовуються рідше. Головна відмінність полягає в тому, що вони повинні йти за іншим. Щоб вам легше було засвоїти цю тему, пропоную розібрати таку структуру:
<тег1> <тег2> <тег3> <тег4> <тег5><тег6>...
Як ви, напевно, здогадалися з попереднього уроку, що теги 2, 3, 4, 5, 6 є контекстними селекторами для тега1. У свою чергу сусідніми селекторами будуть: тег2 та тег3, тег4 та тег5, але в той же час тег2і тег4є сусідніми. Властивості стилів будуть застосовуватися на останній елемент, який ви вкажіть сусіднім. Вам лише слід дотримуватися черговості селекторів. Загальний синтаксис написання такий:
Селектор1 + селектор2+ ...+селекторN ( властивість1: значення; властивість2: значення; ... властивістьN: значення)
Давайте розглянемо з вами такий приклад:
Заголовок
Тег pє сусіднім селектором із тегом h1
