CSS Селектори
Част 1
Created for
Created by
Какво са CSS селекторите?
- Шаблони, които определят над кои HTML елементи ще се приложи зададеният стил в декларациите.
- Могат да бъдат съвсем прости, като '
*' или 'p' или доста по-сложни като:a[href^="https://"]:hover
Списък със всички дефинирани в стандарта (CSS1 – CSS3) селектори: css_selectors
В момента се разработва спецификацията
CSS Selectors Level 4
Селектори за елементи
Element (type) selectors
/* Всички параграфи в документа ще бъдат с червен шрифт */
p {
color: red;
}
Действие: селектира всички HTML елементи от дадения тип.
Универсален селектор (Universal selector)
* {
marging: 0;
padding: 0
}
Действие: селектира всички HTML елементи в документа.
Не се препоръчва да се използва, тъй като забавя обработката на страницата.
Селектори за class и id
HTML атрибути: class и id
- class - можем да зададем един и същи клас на множество елементи в HTML. Така лесно можем да селектираме всички тях.
- id - само един елемент в документа може да има дадено id. T.e. чрез id селектираме само един елемент.
Параграф 1
Параграф 2
Параграф 3
Параграф 4
Параграф 5
Стойности за class и id
- Стойностите на атрибутите class и id са по избор на програмиста, но задължително започват с буква, след която може да има произволна съвкупност от букви, цифри, '_' и '-'.
- Можем да зададем няколко класа за един елемент, като ги разделяме със спейс.
- В атрибута id не можем да имаме спейс!
Параграф 3
Стойности за class и id: добри практики
Slef-learning Section
Селектор за class
- Записва се с точка (".") последвана от стойност на class.
- Може да бъде специфициран допълнително, като пред него непосредствено се запише тип на елемент.
/* Селектира всички HTML елементи, които са дефинирали class="blue" */
.blue{
color: blue;
}
/* Селектира всички HTML елементи, от тип 'p', които са дефинирали class="red" */
p.red{
color: red;
}
Селектор за id
- Записва се с диез (хаш таг) - "#", последван от стойност на атрибута id.
- Тъй като с дадено id можем да обозначим само един единствен елемент от цялото HTML дърво, то е безсмислен записът с тип на елемент отпред.
- Например:
p#vip{...}няма смисъл и не се препоръчва да се използва.
/* Селектира елементът с id="main_title" */
#main_title{
color: red;
}
Пример
/* Селектира всички HTML елементи, които са дефинирали class="c1" */
.c1{
color: purple;
}
/* Селектира всички H1 елементи, които са дефинирали class="c1" */
h1.c1{
font-style: italic;
}
/* Селектор по id */
#vip{
color: #aa3333;
font-size: 2em;
text-shadow:
2px 2px #a000a0,
2px 2px #c000c0;
}
Purple Section:
Заглавие
Параграф
Под заглавие
Параграф
Параграф с id="vip"
CSS Комбинатори (CSS Combinators)
Чрез комбинаторите съставяме селектори, които отчитат позицията (контекста) на елементите в HTML дървото.
Видове HTML възли
- Родител (Parent)
- Дете (Child)
- Наследници (Descendants)
- Братя (Siblings)
Селекторите, чрез които можем да избираме елементи според позицията им в HTML дървото се образуват чрез комбинатори:
Комбинаторите, са символи, чрез които се задава връзка между селектори и така чрез тях се образува съставен селектор.
selector1<combinator>selector2
| Комбинатор | Селектор |
|---|---|
| ' ' (спейс) | parentSelector descendantsSelector |
| '>' | parentSelector > childrenSelector |
| '~' | previousSelector~generalSiblingSelector |
| '+' | previousSelector+adjacentSiblingSelector |
Видове HTML възли и съответстващи комбинатори - Диаграма
Task: Combinators
Стилизирайте елементите както е показано, без да променяте HTML и без да гледате решението ;)
See the Pen CSS Selectrors - Combinators (labs) by Iva Popova (@webdesigncourse) on CodePen.
Task: Combinators
Стилизирайте елементите както е показано, без да променяте HTML и без да гледате решението ;)
See the Pen Combinators Siblings - demo by Iva Popova (@webdesigncourse) on CodePen.
Task: Combinators
Стилизирайте елементите както е показано, без да променяте HTML и без да гледате решението ;)
See the Pen Task: ComplexCombinators by Iva Popova (@webdesigncourse) on CodePen.
Parent Selector?
Поради съображения за сигурност/производителност, засега, не можем да селектираме елементи нагоре и в ляво по дървото. Поради това няма селектор за родител/предшественик.
Parent Slector ;)
awesome-new-css3-selectors ? - ако се зачетете в това, то моля прегледайте и коментарите в темата : ))))
Parent Slector?
Въпреки, че в черновата на Selectors Level 4 има специфициран :has селектор, то все още не е официално приет и не се поддържа от нито един браузер.
Parent Slector : )
The real reason behind the rejection of CSS parent selector
Селектори за атрибути (Attribute Selectors)
Self-learning section
w3schools - CSS Attribute SelectorДават възможност да се селектират елементи с произволни атрибути и стойности за тях.
Пример:
Attribute selectors in codepenЗадачи за упражнение
These slides are based on
customised version of
framework