Хей, имам нещо специално за теб!
Попълни имейл адрес, на който до минута ще получиш обещаното ;)
В този урок на {dev} blondie; реших да те запозная надълго и нашироко с всички начини, по които можеш да селектираш HTML елемент (да, повече от два са) и да разгледаме подробно всички CSS селектори.
Преди да започнем с разглеждането и приложението им, нека уточним…
Както се подразбира и от името, CSS селекторите се използват за избиране (селекторане) на HTML елементи по уеб страницата, които искаме да стилизираме. За да не те карам да си го представяш, ето и как изглежда:
/* CSS Ruleset */
selector {
/* Style rule */
property: value;
}
По този начин указваме КОЙ е конкретният HTML елемент, който искаме да стилизираме, а в скобите добавяме и самите стилове, които искаме да бъдат приложени. Easy peasy.
Може и да се изненадаш, но има десетки начини, по които може да стилизираш даден елемент и те далеч надхвърлят неговия избор само по class име или по ID.
Добре, нека направим нещата още по-реални и да разгледаме следния пример:
header {
background-color: #d2d2d2;
}
Тук HTML елементът, който стилизираме е самия header
, а стилът, който му придаваме е фонов цвят.
Element селекторите са точно типа селектор, който е посочен в примера по-горе – избира се директно HTML елемент или казано по друг начин – HTML таг.
И докато примерът по-горе ще работи отлично, тъй като се предполага (и е редно), че имаме само един header
елемент, то какво би станало ако селектираме всички div
елементи, например:
div {
border: 1px solid #d4d4d4;
border-radius: 5px;
}
Това, което казваме по-горе е: вземи всички div елементи и ги направи с бордър от 1 пиксел еди-какъв-си цвят, както и заоблени с 5 пиксела във всеки край.
И това е супер, но какво ако не желаем всички div
елементи да имат тези стилове, а само един?
Тогава ще се насочим към избора на друг тип селектор, с който да укажем, че тези стилове ще важат само за определен div елемент. Как да се случи това? Със селектор по ID.
Ако желаем да придадем стилове само на един HTML елемент, но е възможно да имаме повече такива в цялата страница, то ще се насочим към избора на селектор по ID, като за целта трябва да осъществим две стъпки:
Ето как би изглеждало това в код:
<div id="bordered">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
#bordered {
border: 1px solid #d4d4d4;
border-radius: 5px;
}
По този начин стиловете от втория code snippet ще се приложат само за div елемент с id="bordered"
и няма да засегнат останалите div
елементи. Има обаче една уловка – определено ID може да бъде само едно и е уникално (гледай на наго като на ЕГН-то ти, никой друг няма такова).
Но тук е важно да ти кажа нещо (да няма после “ама аз не знаех”): употребата на ID за стилизиране не е добра практика, тъй като може да имаш само един елемент с това ID на страница, и второ – ID селектора е с по-голяма тежест (за това ще ти обясня малко по-натам).
За какво тогава се използва ID атрибута? Най-често за две неща:
И така, какво правим, обаче, ако желаем не всички div
елементи да имат тези стилове, но пък и искаме повече от един div
елемент има въпросните стилове?
Използваме селектор по class.
Ако продължим с примерът от по-горе, да речем, че искаме само div елементите с class “bordered” да имат приложени тези стилове. За да осъществим това, има две стъпки:
Ето как би изглеждало това в код:
<div class="bordered">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
<div class="bordered">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut</p>
</div>
.bordered {
border: 1px solid #d4d4d4;
border-radius: 5px;
}
Сега вече стиловете ще се отнасят само за .bordered
(селектираме елемент по class с “.”), но не и за останалите div
елементи.
Технически погледнато, класът и ID-то на даден елемент също са атрибути (всичко, което има ключ от ляво и стойност от дясно, разделени със знак за равенство по средата, се приема за атрибут). В тази секция обаче искам да ти покажа в какви ситуации може да използваш този тип селектиране.
Представи си, че трябва да стилизираш форма, чийто HTML не можеш да променяш, тоест не може да добавиш class
или ID
на някой от input
елементите.
Давам ти и пример:
<form>
<label for="fname">First name:</label><br>
<input type="text" name="fname"><br>
<label for="email">Email:</label><br>
<input type="email" name="email">
</form>
Как да селектираш само input
полето, което е текстово? Ето тук идва намесата селектора по атрибут, а ето и как би изглеждал CSS ruleset-a ни за този случай:
input[type="text"] {
border: 1px solid #d4d4d4;
border-radius: 5px;
}
В случая с [type="text"]
указваме, че желаем описаните правила да се приложат само за този елемент.
Както вероятно се досещаш и от името, с този селектор може да избереш всички (да, всички) елементи в уебсайта.
Най-често ще го срещнеш в началото на всеки CSS документ, където правим т.нар. reset на стиловете по подразбиране, които различните браузъри добавят:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
На първо място – нека видим какво представляват CSS псевдо-селекторите – това са специални селектори, които се използват за стилизиране на определени състояния на елементи или за селектиране на части от елементи, които не могат да бъдат селектирани с обикновени селектори:
.square-div::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: #ff6347;
border: 2px solid #000;
box-sizing: border-box;
}
Пълният списък на псевдо-селектори може да разгледаш на този линк, а по-долу ще изброя някои от най-често използваните:
:before
:afrer
:nth-child()
:checked
:last-child
Как да разпознаеш един CSS селектор? По :
или ::
, разбира се.
В моята практика често се налага да прибегна до употребата на псевдо-селектор, когато, например, искам да селектирам checkbox
HTML елемент, който е селектиран (например да добавя фон или подчертавка, с което да укажа на потребителя какво е избрал). Това би изглеждало по този начин:
.checkbox-label {
font-size: 16px;
margin-right: 10px;
}
input[type="checkbox"]:checked + .checkbox-label {
color: green;
font-weight: bold;
}
Да речем, че искаш всички заглавия на уебсайта ти да са с определен шрифт, който е различен от основния текст. Най-удачния начин да направиш това би бил употребата на списък от селектори:
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Arial', sans-serif;
}
Наближаваме забавната част! За мен селектирането на елементи може да се превърне в забавна игра (или в кошмар, зависи как си построил логиката си).
Също както в HTML документа влагаме елемент в елемент, така можем да правим същото и със стиловете в CSS документа. Да вземем следния пример:
<section class="hero">
<div class="logo">
<img src="logo.svg" alt="logo"/>
</div>
</section>
.hero .logo img {
width: 200px;
height: 50px;
}
Както виждаш в примера горе, първо избрах целия parent element – div-a, цялата .hero
секция, след това div
-a, който държи логото, и най-накрая – самото изображение.
Ако използваме препроцесор (а какво представляват CSS препроцесорите може да видиш тук), този code snippet щеше да изглежда така:
.hero {
.logo {
img {
width: 200px;
height: 50px;
}
}
}
В случай че има две или повече противоречиви CSS правила, които сочат към един и същ елемент, приоритизирането определя кои от тези правила ще бъдат приложени.
Всеки от селекторите, изброени по-горе, има своето място в тази йерархия. Съществуват четири категории, които определят приоритета на всеки от селекторите:
Ако се чудиш какво са inline стиловете, накратко – това е CSS, който е написан директно в HTML елемента:
<p style="font-size: 14px; color: #f200000";">Test paragraph</p>
Този начин за добавяне на стилове не се препоръчва, тъй като промени в последствие не могат да бъдат добавяни (през CSS файла) и стиловете не могат да бъдат презаписани.
Ето и как може да представим приоритета на CSS селекторите:
Както се убеди, CSS е богат на селектори и ни предоставя множество възможности да достъпим който и да е елемент в уеб страницата.
На 13.10.2024 ще се проведе интензивен workshop “CSS за напреднали“, по време на който ще видим и ползваме по-комплексни CSS селектори, както и препроцесор.
Виж повече детайли и запази своето място тук.
Псевдо селекторите са ме спасявали супер много пъти, когато е трябвало да стилизирам код на плъгин или на софтуер, който не мога да пипам като елементи. Супер урок, продължавай все така