Видове селектори

Селекторите чрез които може да се зададе стил на даден HTML елемент се разделят на следните видове:

• селектор от тип HTML елемент
• класов селектор
• id - селектор

1.Селектор тип HTML елемент

Този тип селектор представлява всеки един HTML елемент. Той указва, че стила ще се приложи за всеки такъв елемент в документа.

Следващите примери показват как се прилага стил на стандартните HTML елементи <а></а> и <p></p>.

Пример:

p {background-color:#CCC;}  a {text-transform:lowercase;}

 

2.Класов селектор

Този селектор се използва за дефиниране на стил на един или повече HTML елементи, като не е задължително да бъдат от един и същ тип.

Синтаксис: .<име_на_селектор> където,
<име_на_селектор> се задава от потребителя

Пример:

.my_class{ color:green; font-size:14px; }

 

За да се приложи на даден HTML елемент стил, дефиниран чрез класов селектор, е необходимо да се използва атрибута class на съответния елемент. Стойността на атрибута клас трябва да е името на класовия селектор (съкратено се казва името на класа или само класа).

Пример:

<div class="my_class">Съдържание на елемента...</div>  <p class="my_class">Съдържание на елемента...</p>

 

В дадения пример се показва как се задава един и същ стил на div и p елементи чрез класовия селектор my_class. Стила е описан в предишния пример.

3.id - селектор

Този тип селектор може да се задава само на един елемент в документа.

Синтаксис: #<идентификатор_на_елемент> където,
<идентификатор_на_елемент> е идентификатор на HTML елемент зададен чрез атрибута id.

Стилът се задава на елемента с идентфикатор имащ стойност = <идентификатор_на_елемент>

Пример:

.my_cont{ color:green;} ... <div id="my_cont"> Съдържание ... </div>