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

CSS ви позволява, да “намерите” и промените външния вид на даден елемент. Може да намерите елемент по клас, id, име на таг, стойност на атрибут и т.н.


Селектиране по име на Елемент
Елемент селекторът избира html елементът на базата на името му

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

Пример:

p {
text-align: center;
color: blue;
}


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

ID-то трябва да е уникално в страницата и се използва, за да се намери един, единствен елемент

За да намерите елемент с определено ID се използва “#” последван от зададеното ID на елемента.
Друго важно е, че ID-то не трябва да започва с цифри.

Долното правило ще бъде зададено за елемент с id = “head1”:

Пример:

#head1 {
text-align: center;
color: blue;
}



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

За да намерите елемент с определен клас се използва “.” последвана от зададеното име за клас на елемента:

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

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

Пример:

.center {
text-align: center;
color: blue;
}



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

h1 {
text-align: center;
color: bluew;
}

h2 {
text-align: center;
color: blue;
}

p {
text-align: center;
color: blue;
}

За да минимизирате кода, можете да групирате селекторите.

Групирането на селектори става чрез разделянето им със запетая.

В примера по-долу са групирани селектори от кода по-горе:

Пример:

h1, h2, p {
text-align: center;
color: blue;
}



С помощ от w3schools.com