Підручник css - дочірні селектори css
Дочірні селектори CSS - це селектори, які використовуються для застосування стилів до елементів тільки в тих випадках, коли вони є дочірніми по відношенню до інших (батьківським) елементам. Як і селектори нащадків, дочірні селектори є складовими і складаються з простих селектор (класи, ідентифікатори і т.д.).
І знову, якщо ви забули, що таке дочірні елементи, то давайте згадаємо, розібравши вже знайомий вам приклад.
Елемент називається дочірнім по відношенню до іншого елементу, якщо він знаходиться всередині нього на першому рівні вкладеності. У нашому прикладі <тег2> і <тег3> є дочками <тег1>. а <тег4> - це дочка <тег3> .
Дочірні селектори складаються з двох або більше простих селектор розділених знаком ">", де спочатку вказується батько, потім його дочірній елемент, потім дочка цього дочірнього елемента і т.д. Тобто, як і в селекторах нащадків, задається шлях проходження по дереву документа. Стилі будуть застосовані тільки до тих елементів, селектори яких знаходяться останніми в списку. Загальний синтаксис:
Прогалини з обох сторін знака ">" можна ставити, а можна і ні, за бажанням.
Приклад використання дочірніх селекторів CSS
Результат в браузері
У цьому прикладі вам треба звернути увагу на два моменти. Тут є три елементи
Internet Explorer 6.0 не розуміє дочірні селектори, тому, якщо ви створюєте свій сайт з урахуванням цього старого браузера - пам'ятайте про це.
Дочірні селектори в HTML-таблицях
Багато новачків (а іноді вже і не новачки) в створенні сайтів стикаються з певними проблемами при використанні дочірніх селекторів в HTML-таблицях. Щоб ви зрозуміли, про що йде мова, давайте подивимося на таку звичайну таблицю.
А тепер питання. Що ви будете робити, якщо вам знадобиться за допомогою дочірніх селекторів пройти від тега