Child селектор 2
Сподели урока
В този урок искам да те запозная с един наистина страхотен CSS селектор. Този ми е един от любимите, защото не само че е супер ефективен, но и е много лесен за усвояване. За съжаление обаче, забелязвам че много малко хора го използват в своя код. Главните причини според мен са, че или не знаят за същестуването му, или умишлено го избягват, просто защото не знаят как да го приложат правилно.
Става въпрос за т.нар. child селектор. Звучи ли ти познат? В този урок ще ти помогна да усвоиш начина му на работа, чрез което искам да те окуража да го използваш в своя CSS код.
Съдържание
- Синтаксис
- Какво представлява child селектора?
- Настояща браузърна поддръжка
- Упражнение
- Заключение
- Полезни линкове
Синтаксис
Започвам директно с най-приятната част, а именно, как се използва този селектор.
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иph2иpса директни “деца” наdivh2и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 селектора.
За целта ще създам страница с няколко параграфа, които ще стилизирам по различен начин базирайки се на 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 вътрешно разстояние от всички страни. Това ще отдалечи съдържанието от “стените” на елемента.
Резултат:
Както виждаш селектора може да придобие и по-сложен вид чрез “наслагване”. Това обаче рядко е нужно. В 99% от случаите обикновени селектори като предните два би трябвало да ти свършат нужната работа.
Заключение
Надявам се, че ти допадна работата на child селектора и виждаш колко е гъвкав и лесен за усвояване.
Според мен, използването на child селектора е знак за добро владеене на CSS и професионализъм. Вече не е нужно да го избягваш. Използвай го смело! С течение на времето ще забележиш как кода ти става по-чист, логичен и лесен е за възприемане.
Успя ли да научиш нещо ново в този урок? Какво мислиш за child селектора? Ще ти помогне ли да станеш по-добър в писането на CSS? Сподели мнението си в коментарите по-долу.
Полезни линкове
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Благодаря за полезната информация. Вече по-често ще използвам селектора “Child”.
Поздрави от мен и да продължавате все така с полезните статии. :))
2
Да си жив и здрав, Авторе.
От доста време се чудих как работи child селектора.
Продължавай с уроците :)