Оформянето на текста и съдържанието на уебсайт с HTML код е само едно „парче“ от изграждането предния край на уебсайт. Друга голяма част от този процес е създаването на визуален стил, който се управлява от правилата на CSS.
Винаги, когато създаваме нов уебсайт или правим големи промени в оформлението на съществуващ, неизбежно искаме конкретни части от нашия уебсайт да изглеждат по определен начин. За да направите това, важно е да разберете как да използвате различните CSS комбинатори, като CSS селектор за потомци. Този CSS комбинатор позволява на големи раздели на уебсайт да получават едни и същи промени в стила наведнъж.
Какво е CSS Descendant Selector?
Селекторът за потомци на CSS е един от четирите различни CSS комбинатори. Когато добавяте единично интервал () между два селектора, едни и същи стилови елементи ще се прилагат и към втория селектор, като се има предвид, че потомците споделят същия първи селектор.
За да разберете CSS селектор за потомци, първо трябва да го направите
разбирам CSS селектори. Най-добрият начин да се опише селектор е, че това е CSS оператор, който идентифицира частта от HTML, която се опитвате да оформите. Нарича се селектор, защото "избира" какъвто и да е бит HTML споделя същия оператор като CSS родител.Често срещани примери за такива оператори са:
div
Това е маркер, който определя раздел на HTML, който може да включва неща като абзаци и съдържание или:
ли
което е подреден списък. Друг подобен таг е:
ул
Това създава неуреден списък. По-сложните модели също се наричат селектори. Казано по-просто, CSS селектор за потомци казва на уебсайта как да изглежда, когато един селектор е „вложен“ под общ предшественик.
Първият селектор се превръща в CSS родител или селектор ‘предшественик’, а вторият селектор се превръща в потомък. Помислете как работи файловата директория: CSS родителят е като папка, която съдържа други папки, които могат да съдържат собствени папки.
От четирите комбинатори единственият, който избира всичко, което е вложено под конкретен родител на CSS, е селекторът за потомци на CSS. Има три други комбинатори.
- Дочерният селектор (‘>’ вместо единично интервал) избира само елементи, посочени от първия селектор в комбинатор. Ако първият селектор е (div), а вторият селектор е (p), се избира само (p), стига да има (div) като предшественик. Ако абзацът е създаден под нов (раздел), дори ако е в същия (div), правилата за стил не се запазват.
- Съседният селектор за сестри (‘+’ вместо единично интервал) избира само елемента, който е най-близо до втория селектор в комбинатора. Ако първият селектор е (div), а вторият селектор е (p), се избира първият елемент, който използва (p), но не (div).
- Общият селектор за сестри (‘~’ вместо единично интервал) избира всеки елемент, с изключение на тези, посочени от втория селектор. Ако първият селектор е (div), а вторият селектор е (p), се избира всеки елемент, който не е (p).
Как изглежда CSS Descendant Selector?
В следващия пример за два различни CSS низходящи селектори, работещи един до друг, [div] е първият селектор в първия комбинатор, докато (ul) е първият селектор във втория комбинатор. И в двата CSS селектора на потомци (p) се използва като втори селектор.
Елементите на стила се различават между (div) и (ul), но (p) явно носи чертите на своя CSS родител и в двата случая.
Защо да използваме CSS селектор за потомци?
За да разберете значението на CSS селектора на потомци, е ценно първо да разберете вложени CSS селектори.
Обикновено искаме определени правила за стил да се прилагат за целия уебсайт, като специфичния размер или шрифт, който целият текст на абзац (p) използва по подразбиране. По същия начин HTML може да започне да изглежда разхвърлян, ако тези правила за стил се прилагат за всеки отделен параграф, а не за целия уебсайт.
Вложен CSS е възможен чрез използването на CSS комбинатори като CSS селектор за потомци. Чрез „влагане“ на CSS под родителски селектор е възможно бързо и ефективно да кажете на уебсайт как трябва да изглежда конкретен селектор във всеки сценарий, за който е посочен родителят на CSS.
Използването на вложен CSS селектор ни позволява да прилагаме едни и същи правила за стилизиране на няколко секции на даден сайт едновременно, което ни позволява да се справяме с по-малко работа, като същевременно поддържаме нашия HTML чист и девствен.