Adjacent sibling селектор 5
Сподели урока
В този урок ще фокусирам вниманието ти върху т.нар. adjacent sibling селектор. Знам, името му наистина звучи малко сложно, но още от сега те успокоявам, че този селектор е доста лесен за усвояване.
Всъщност, доста хора избягват да го използват, просто защото им се струва прекалено труден. Това съвсем не е така. Надявам се в този урок да те убедя в противното и същевременно да придобиеш достатъчно знания, за да го използваш успешно в своя CSS код.
Синтаксис
Накратко, adjacent sibling селектора се използва по следния начин:
... където В е елемента, който ще бъде стилизиран. Целият този селектор ще бъде в сила, единствено когато А и B имат общ родител и B се намира непосредствено след А в HTML документа.
Надявам се да ти стане по-ясно от обяснението и примерите, които следват.
Какво е adjacent sibling селектор?
Преди да отговоря на този въпрос искам да спомена, че adjacent sibling селектора не е част от новите CSS 3 селектори. Той спада към “старите” CSS 2.1 селектори, което ти гарантира широка браузърна поддръжка. Това пък означава, че можеш да започнеш да го използваш още от днес (без ограничения).
Честно да си призная не можах да се сетя за подходящ и смислен превод на “adjacent sibling” затова го оставих така. Ако ти се сещаш за някакво смислено значение, ще се радвам да го споделиш в коментарите след урока.
В интернет има преводи като “братя/сестри селектори” и “съседен братски елемент”, но лично на мен не ми звучат достатъчно описателни. Точно затова в този урок ще използвам името на английски - adjacent sibling селектор, а ще те оставя ти сам/-а да си правиш нужните асоциации.
За да ти обясня най-добре значението на adjacent sibling, ще те върна за кратко в HTML.
Разгледай следния HTML код:
<body> <h1>Заглавие на раздел</h1> <p>Текстов параграф.</p> <img src="picture.jpg" alt="" /> <p>Кратко описание на изображението.</p> <p>Текстов параграф.</p> </body>
Доста изводи можем да направим, но най-важните са:
- <body> е “родител” на елементите h1, p и img.
- Елементите h1, p и img са “деца” на <body>.
- Елементите h1, p и img са “братя/сестри” помежду си, защото произлизат директно от “родителя” <body>.
- Първият текстов параграф е т.нар. adjacent sibling на заглавието h1, защото стои непосредствено след него.
- Изображението е adjacent sibling на първия параграф, защото се намира непосредствено след него и т.н.
- Изображението не е adjacent sibling на заглавието h1, защото между тях има параграф.
Т.е. от всичко това по-горе следва да кажа, че: “adjacent sibling селектора не е нищо повече от два обикновени селектора свързани със знака плюс (+). Той се използва за прилагане на стил върху елемент базирайки се на елементa/-ите непосредствено преди него в HTML документа. Приложеният стил ще се отрази върху селектора намиращ се след плюса”.
Настояща браузърна поддръжка
От следващото изображението можеш да видиш, че този селектор се поддръжа общо взето от всички браузъри с изключение на Internet Explorer < 6.
Internet Explorer < 6 се използват все по-малко и по-малко и според мен можеш спокойно да ги игнорираш. Това пък означава, че можеш да се възползваш от adjacent sibling селектора в своя CSS без абсолютно никакви притеснения.
Информацията е взета от Caniuse.
Пример
Стъпка 1
Тук ще преизползвам кода от по-горе. Представи си, че в <body> имаш следния HTML код:
<body> <h1>Остров Бурано</h1> <p>Текстов параграф.</p> <img src="picture.jpg" alt="" /> <p>Спокоен следобен на остров Бурано, Венецианска лагуна.</p> <p>Текстов параграф.</p> </body>
Резултата не е нищо особено. Заглавие, параграф и изображение, последвано от още два параграфа. Стила на страницата е също толкова стандартен. Нека го променим.
Стъпка 2
За да упражниш наученото, ще ти покажа как да увеличиш размера на текста в първия параграф използвайки h1 заглавието като референция. Също така ще приближим текста, който се намира под изображението, по-близо до него, за да го направим да изглежда като описание, а не като отделено съдържание.
Обикновено, някой начинаещ би използвал id/class за тази цел, но не и ти. Ти вече знаеш за силата и гъвкавостта на adjacent sibling селектора. Благодарение на него, кода се свежда наистина до минимум.
CSS кода изглежда така:
h1 + p {
font-size: 18px;
}
img + p {
font-size: 14px;
font-style: italic;
margin-top: 0px;
}
- h1 + p – ще избере всеки параграф, който е предшестван от h1 заглавие.
- img + p – ще избере всеки параграф, който е предшестван от изображение.
Заключение
Надявам се, че успя да усвоиш този така “сложен” и “страшен” adjacent sibling селектор. Без значение дали се нарича “брат/сестра” или “непосредствено следващ елемент”, този селектор е изключително лесен за употреба. Чрез него със сигурност ще постигнеш по-качествен и гъвкав CSS код.
Какво мислиш, ще ти помогне ли adjacent sibling селектора в създаването на по-практичен код? Използваш ли го вече в своя сайт и какви други съвети би дал? Сподели мнението си в коментарите по-долу.
Полезни линкове
Използвани изображения
Към примера: Late afternoon on Burano Island
Поздравления, това е краят на този урок!
За награда получаваш вкусен мъфин.
Хареса ли ти урока? Сподели го със света :)
1
Благодаря за урока. Не бях ползвал този селектор досега, а се оказва полезен. Пробвах селектори тип img + p + p, но също така и селектор тип img + * + p и дори img + * + * + * + p, които работят и са полезни.
За съжаление нещо подобно не работи img + * + h1 + * + p, но да не ставаме нагли. :D
2
Браво! Урокът е доста полезен!
3
Много полезен урок. Благодаря ти!
4
@Иван: Твоя подход е също доста интересен. Не се бях замислял за подобен. Проблема е, че при прекалено дълга верига много лесно може да се изгуби контрол. Също трябва да се помисли и върху бързодействието. Може би затова е най-добре целия селектор да се държи до минимум. Въпреки това изглежда като добра възможност.
@Ясен Георгиев и @Кристиян Иванов: Благодаря за коментарите :)
5
Браво за урока и за труда. Сайта е чудесен.