Селектори при CSS

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

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

Елемент селекторът избира html елементът на базата на името му. Можете да изберете всички „p“ елементи на страницата така: (всички „p“ елементи ще бъдат центрирани и оцветени в червено).

Опитайте сами »

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

ID селекторът използва атрибутът id, добавен към html таг, за да посочи конкретен елемент. ID-то трябва да е уникално в страницата и се използва, за да се намери един, единствен елемент. За да намерите елемент с определено ID се използва „#“ последван от зададеното ID на елемента. Долното правило ще бъде зададено за елемент с id = „para1“:

Опитайте сами »

Името на ID-то НЕ ТРЯБВА да започва с цифри!

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

Селекторът по клас използва атрибутът class добавен към html таг, за да посочи конкретен елемент.

За да намерите елемент с определен клас се използва . последвана от зададеното име за клас на елемента. В примера по-долу, всички HTML елементи с клас = „център“ ще бъде център-изравнени:

Опитайте сами »

Можете да зададете използването на класа само за конкретни елементи. В примера по-долу, всички параграфи с клас center ще бъдат центрирани:

Опитайте сами »

Имената на класовете НЕ ТРЯБВА да започват с цифри!

Групиране на селектори

В CSS често се случва, да сложим еднакви стилове на няколко различни елемента:

За да минимизирате кода, можете да групирате селекторите. Групирането на селектори става чрез разделянето им със запетая. В примера по-долу са групирани селектори от кода по-горе:

Опитайте сами »