Урок 3. Групові селектори і селектори нащадків

Урок 3. Групові селектори і селектори нащадків

Здрастуй, шановний читачу.

Це третій урок вивчення технології CSS. З даного уроку ви дізнаєтеся що таке групові селектори, як їх використовувати, а також дізнаєтеся про селектори нащадків.

Перед вивченням CSS пройдіть попередні уроки:

Урок 1. Що таке CSS?
Урок 2. Базові селектори

Теорія та практика

З минулого уроку ви дізналися таке селектор, а також дізналися які бувають селектори. Сьогодні ми розглянемо як їх можна комбінувати для того щоб управляти елементами на сторінці стало легше.

Відео: Курс CSS - Урок №5. селектори нащадків

селектор нащадків

Вся html сторінка схожа на дерево. Головний елемент сторінки це тег , а всі інші теги це нащадки даного тега. Теги і є нащадками тега . Тобто тег для них є для них батьком. Наочно можна побачити на зображенні нижче:

Дерево елементів html

А так як html сторінка це ієрархія елементів, значить ми можемо звертатися до будь-якого елементу сторінку через її родітілей нащадків. Щоб не мучити з теорією подивимося приклад.

завдання: Нам необхідно розфарбувати всі посилання на сторінці, які знаходяться всередині списку. Нижче представлена html код необхідної нам сторінки.

1234567891011121314151617


lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;pgt; Вивчення CSSlt;/pgt;lt;pgt; lt;a href="#"gt; Перейти на головнуlt;/agt; lt;/pgt;lt;pgt; Vivamus nec nulla a ipsum vulputate interdum. Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet.lt;/pgt;lt;ulgt;lt;ligt; Класний сайт lt;a href="#"gt; SiteHere.RUlt;/agt; lt;/ligt;lt;ligt; Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet. Перейдіть за посиланням lt;a href="#"gt; Перейтиlt;/agt; lt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

Відео: [CSS 3] Урок 4. селектори ч. 2

Ви помітили що у нас є посилання, яка знаходиться в тезі , а також посилання які знаходяться в списку в тегах. Для того щоб вирішити нашу задачу існує селектор нащадків. Рішення в CSS має такий вигляд:

1234567891011
body{background-color:# C1BAFF-}p{color:# 4600BF-}ul li a{color:#ffffff-}

Для того щоб вибрати тільки ті посилання, які знаходяться всередині тегів необхідно в CSS написати наступне:

селектор нащадків

Як бачите в прикладі нижче у нас вибралися тільки посилання які знаходяться всередині тега, а посилання в тезі

залишилася неокрашенной. Тобто ми можемо отримати доступ до будь-якого елементу через ієрархію html елементів.

Подивитися прімерСкачать

груповий селектор

Для скорочення кількості коду в CSS файлі використовується груповий селектор. Сенс групової селектора в тому, що коли ми хочемо задати якесь загальне властивість для деяких елементів, ми прописуємо селектори елементів через кому. Приклад. У нас є ось така html сторінка:

1234567891011121314151617181920
lt;htmlgt;lt;headgt;lt;titlegt; Головнаlt;/titlegt;lt;meta http-equiv="Content-Type" content="Text / html- charset = utf-8"gt;lt;link rel="Stylesheet" type="Text / css" href="Style.css"gt;lt;/headgt;lt;bodygt;lt;pgt; Вивчення CSSlt;/pgt;lt;pgt; lt;a href="#"gt; Перейти на головнуlt;/agt; lt;/pgt;lt;p class="Text"gt; Vivamus nec nulla a ipsum vulputate interdum. Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet.lt;/pgt;lt;div id="Content"gt; Pellentesque egestas tellus nec sapien euismod, et tincidunt tortor convallis. Maecenas quis arcu ac mauris pretium egestas eget eget urna. Vivamus adipiscing sem vel nulla auctor ultrices. Donec commodo gravida tellus ac convallis.lt;/divgt;lt;ulgt;lt;li class="Site"gt; Класний сайт lt;a href="#"gt; SiteHere.RUlt;/agt; lt;/ligt;lt;ligt; Nunc fermentum lacus velit, id dapibus sapien porttitor sit amet. Перейдіть за посиланням lt;a href="#"gt; Перейтиlt;/agt; lt;/ligt;lt;/ulgt;lt;/bodygt;lt;/htmlgt;

Нам необхідно виділити жирним елементи з селекторами class = "site", id = "content" і текст в тегах

.

Щоб вибрати всі ці елементи в CSS всього лише необхідно прописати наступне:

123
.site, #content, p{font-weight:bold- / * Жирний текст для тексту * /}

Відео: Цикл уроків з основ CSS - селектори нащадків

Також рекомендую подивитися приклад:

Подивитися прімерСкачать

Сьогодні ми розглянули групові селектори і селектори нащадків, для більш гнучкого написання CSS коду. Це був простий урок і я впевнений що ви в ньому розберетеся. Пробуйте все прописати руками. Тоді ви краще запам`ятайте матеріал.

Більше практикуйтеся!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!