CSS селектори са използвани за да изберете съдържанието, което искате да стилизирате . Селекторите са част от набора от CSS правила. CSS селекторите избират HTML елементи според техния идентификатор, клас, тип, атрибут и т.н.
В CSS има няколко различни типа селектори.
- Селектор на CSS елементи
- Селектор на CSS идентификатор
- Селектор на CSS клас
- CSS универсален селектор
- Селектор на CSS групи
1) Селектор на CSS елементи
Селекторът на елементи избира HTML елемента по име.
p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p> Тествайте сега Изход:
Този стил ще бъде приложен към всеки параграф.
Аз също!
И аз!
2) Селектор на CSS идентификатор
Селекторът на id избира атрибута id на HTML елемент, за да изберете конкретен елемент. Идентификаторът винаги е уникален в рамките на страницата, така че е избран за избор на единичен уникален елемент.
Изписва се с хеш символа (#), последван от идентификатора на елемента.
Да вземем пример с id 'para1'.
#para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p> Тествайте сега Изход:
Здравейте Javatpoint.com
Този параграф няма да бъде засегнат.
3) Селектор на CSS клас
Селекторът на клас избира HTML елементи със специфичен атрибут на класа. Използва се с точка. (символ точка), последван от името на класа.
Забележка: Името на клас не трябва да започва с число.
Нека вземем пример с клас 'център'.
.center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p> Тествайте сега Изход:
Здравейте Javatpoint.com
Здравейте Javatpoint.com (С по-малък шрифт)
Това е параграф.