Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Child селектор 2

Сподели урока

В този урок искам да те запозная с един наистина страхотен CSS селектор. Този ми е един от любимите, защото не само че е супер ефективен, но и е много лесен за усвояване. За съжаление обаче, забелязвам че много малко хора го използват в своя код. Главните причини според мен са, че или не знаят за същестуването му, или умишлено го избягват, просто защото не знаят как да го приложат правилно.

Става въпрос за т.нар. child селектор. Звучи ли ти познат? В този урок ще ти помогна да усвоиш начина му на работа, чрез което искам да те окуража да го използваш в своя CSS код.

Съдържание

Синтаксис

Започвам директно с най-приятната част, а именно, как се използва този селектор.

Child селектора има следния вид:

a > b

..., където b е пряко “дете” на a.

Накратко, този селектор ще селектира всички b елементи, които са преки “деца” на “родителския” елемент a.

Специфичното на този селектор е знака >, който има огромно значение за бързодействието и ефективността му.

В следващите редове ще ти дам малко по-подробна информация, както и един нагледен пример.

Какво представлява child селектора?

Child селектора не е нов селектор. Той е част от “старите” 2.1 селектори, което е наистина добра новина, защото се поддържа на 100% от всички съвременни браузъри.

Най-важното, което трябва да запомниш за child селектора е, че работата му се базира върху връзката между елементите “родител” - “дете”.

Разгледай следния HTML:

<div>
  <h2>Заглавие</h2>
  <p>Параграф. <a href="">Линк</a>.</p>
</div>

Много е важно да разбереш взаимоотношението между елементите и да имаш добра представа във всеки един момент как всички те се отнасят помежду си.

Ето няколко ключови точки:

  • div е “родител” на елементите h2 и p
  • h2 и p са директни “деца” на div
  • h2 и p са “братя/сестри” помежду си
  • a е “дете” на p

Базирайки се на тези взаимоотнишения, следния CSS код:

div > p {
  font-size: 18px;
  margin-bottom: 15px;
}

.. ще стилизира единствено p елементите, който са директни “деца” на div. Всички останали елементи от този тип няма да бъдат засегнати.

Тук може би си задаваш въпроса - “Селектора div p не върши ли абсолютно същата работа?”.

Донякъде имаш право.

За да ти отговоря, разгледай следния HTML код:

<div>
  <h2>Заглавие</h2>
  <p>Параграф 1.</p>
  <ul>
    <li><p>Параграф 2.</p></li>
    <li><p>Параграф 3.</p></li>
  </ul>
</div>
  • Селектора div p ще избере всички p елементи без значение колко надълбоко в структурата се намират. Стила ще се приложи върху Параграф 1, 2 и 3.
  • Селектора div > p обаче ще избере единствено p, които са директни “деца” на div. Стила ще се приложи само върху Параграф 1.

Надявам се, че забелязваш разликата.

Child селектора е идеален, в случаите когато искаш да ограничиш влиянието на кода само върху определени елементи от даден вид, без да се притесняваш от унаследяване и презаписване на стилове в по-късен етап.

Настояща браузърна поддръжка

Както можеш да видиш от изображението, използването на child селектора е напълно безопасно. Не се поддържа единствено от IE < 6, което в настоящия момент (според мен) вече няма почти никакво значение.

Браузърна поддръжка на child селектора

Упражнение

В това упражнение ще се опитам напълно да ти изясня работата на child селектора.

За целта ще създам страница с няколко параграфа, които ще стилизирам по различен начин базирайки се на html структурата на документа.

Стъпка 1

Започвам със създаването на самия html документ. Към нещо прикачвам и един външен CSS файл.

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Child селектор</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>

    </body>
</html>
Стъпка 2

След като страницата е готова, ще поставя в body самото съдържание.

index.html

<div class="content">
  <h2>Заглавие</h2>
  <p>Параграф 1.</p>
  <p>Параграф 2.</p>
  <div>
    <p>Параграф 3.</p>
    <p>Параграф 4.</p>
  </div>
  <p>Параграф 5.</p>
  <p>Параграф 6.</p>
</div>

Тук имам div с class="content", който служи като контейнер на цялото съдържание. Имам и втори div, който огражда единствено параграфите 3 и 4.

В момента всички параграфи изглеждат еднакво, без значение къде се намират.

Нормален стил на параграфите

Стъпка 3

Чрез следващия CSS код ще направя малко промени:

style.css

body {
  width: 550px;
  margin: 0 auto;
  font-family: Verdana, Arial, sans-serif;
  line-height: 24px;
}
.content > p {
  background-color: #e8daa1;
  font-weight: bold;
}
.content > div > p {
  background-color: #73d38e;
  padding: 10px;
}

Кратко обяснение:

  • Кода на редове 2-5 ще ограничи ширината на 550px и ще постави съдържанието в средата на прозореца. Чрез font-family променям използвания шрифт, а line-height ми помага да рагулирам височината на реда.
  • .content > p ще селектира единствено параграфите (p) 1, 2, 5 и 6, защото са директни “деца” на div с class="content". От гледна точка на стил background-color ще добави фон, а font-weight ще удебели текста.
  • .content > div > p от друга страна ще селектира параграфите 3 и 4, които се намират във вътрешния div, който пък е “дете” на .content. Тук отново променям фона чрез background-color, а padding ще добави 10px вътрешно разстояние от всички страни. Това ще отдалечи съдържанието от “стените” на елемента.

Резултат:

Добавяне на стил чрез child селектора

Както виждаш селектора може да придобие и по-сложен вид чрез “наслагване”. Това обаче рядко е нужно. В 99% от случаите обикновени селектори като предните два би трябвало да ти свършат нужната работа.

Заключение

Надявам се, че ти допадна работата на child селектора и виждаш колко е гъвкав и лесен за усвояване.

Според мен, използването на child селектора е знак за добро владеене на CSS и професионализъм. Вече не е нужно да го избягваш. Използвай го смело! С течение на времето ще забележиш как кода ти става по-чист, логичен и лесен е за възприемане.

Успя ли да научиш нещо ново в този урок? Какво мислиш за child селектора? Ще ти помогне ли да станеш по-добър в писането на CSS? Сподели мнението си в коментарите по-долу.

Полезни линкове

Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.

Награда за това, че успя да достигнеш до края на урока.

Хареса ли ти урока? Сподели го със света :)

Начало

2 страхотни коментара

  1. 1

    Антон
    08 октомври 2014 10:44

    Благодаря за полезната информация. Вече по-често ще използвам селектора “Child”.
    Поздрави от мен и да продължавате все така с полезните статии. :))

  2. 2

    Мариян
    26 април 2015 12:40

    Да си жив и здрав, Авторе.
    От доста време се чудих как работи child селектора.
    Продължавай с уроците :)

Твоят коментар

* - задължителни полета