Учебни записки

4. CSS

4.3. CSS селектори

Селекторите в CSS служат да дадат информация на браузъра, за кои елементи е предназначено правилото, следващо след селектора.

Селектори се използват само за декларациите, които се поставят между тагове <style></style> или в отделни файлове. За декларациите, намиращи се в стойностите на атрибута style на елементите, селектори не са необходими, защото тези декларации е ясно, че трябва да се приложат само върху съответния елемент.

Селектор по име на таг

Този селектор съвпада с име на таг. Например:

body { background-color: yellow; }
p { text-align: justify; }

В примера, първото правило прави цвета на фона на целия документ жълт, а второто правило прави всички абзаци текст да са подравнени двустранно.

Селектор по клас

Клас е понятие от HTML. Клас е група от елементи. Принадлежността на даден елемент към някой клас се посочва с атрибута с име class. Например:

<h1 class="a">Заглавие от клас "a"</h1>

<p class="a">Абзац от клас "a".</p>

<p class="b">Абзац от клас "b".</p>

<p class="a b">Абзац, който попада и в клас "a", и в клас "b".</p>

Имената на класовете се измислят от съставителя на HTML кода. CSS селектор, който трябва да определи клас елементи, за които се отнася правилото, е името на класа с точка пред него. Например:

.a { border: solid 1px; }
h1.a { border-width: 2px; }
.b { border-radius: 5px; }

В този пример: първото правило налага всички елементи от клас a да имат рамка с дебелина 1 пиксел; второто - всички заглавия h1 от клас a да имат дебелина на рамката от 2 пиксела; а третото - всички елементи от клас b да имат заоблени ъгли с радиус 5 пиксела.

Селектор по идентификатор

Идентификаторът е атрибут с име id, който се поставя на определени елементи. Целта е съответният елемент да се идентифицира единствено по стойността на своя идентификатор. Правилно е в HTML кода на една страница стойностите на идентификаторите да не се повтарят. (Всеки идентификатор да е уникален!). Имената на идентификаторите се измислят от автора на HTML кода. Пример:

<p id="important">Абзац с идентификатор.</p>

Абзацът в примера има идентификатор important. За да се приложи CSS правило към елемента, носещ съответния идентификатор се използва селектор, който съдържа знак #, следван от стойността на идентификатора. Пример:

#important { text-weight:bold; color:red; }

Това правило ще направи абзаца текст с идентификатор important да се изобрази с получер шрифт в червен цвят.

Справочник на селекторите вижте в: CSS Selector Reference