CSS селектори

Од Википедија — слободната енциклопедија

CSS-селектори се збир од правила кои помагаат во одбирањето на одреден елемент или ознака во некој HTML-документ.

Список на CSS 2.1 селектори[1][уреди | уреди извор]

Селектор Тип на селектор Опис
* Универзален селектор Одговара на сите елементи
* {font-family:serif;}
A Селектор на типот на елемнтот Одговара на името на елементот
div {font-style:italic;}
A, B Групирани селектори Одговара на елементите A и B
h1,h2,h3 {color:blue;}
A B Селектор на потомокот Одговара на елементот B само ако B e потомок на A
blockquote em {color:red;}
A>B Селектор на дете Одговара на секој елемент B кој е дете на елементот А
div.main>p {line-height: 1.5;}
A+B Селектор на брат Одговара на секој елемент B кој е непосредно по било кој елемент А
p+ul {margin-top:0;}
.classname
A.classname
Селектор на класа Одговара на вредностите на атрибутите на класата во сите елементи или во наведениот елемент
p.credits {font-size: 80%;}
#idname
A#idname
Селектор на идентификатор Одговара на вредноста на атрибутот „id“ во елементот
#intro {font-weight:bold;}
A[att] Селектор на атрибут Одговара на секој елемент A со дефиниран атрибут „att“ без разлика на неговата вредност
table[border] {background: white;}
A[att="val"] Специјален селектор на атрибут Одговара на секој елемент А на кој вредноста на атрибутот „att“ е „val“
table[border="3"] {background="yellow";}
A[att~="val"] Специјален селектор на атрибут Одговара на секој елемент А на кој вредноста на атрибутот „аtt“ е слична на „val“
table[class="primer"] {background="yellow";}
A[att|="val"] Специјален селектор на атрибут Одговара на секој елемент А на кој вредноста на атрибутот „att“ почнува или е еднаква на „val“
<a[lang|="mk"] {background-image: url(mk_icon.png);}
A:link Селектор на псевдокласа Го дефинира стилот на сите непосетни врски во елементот А
a:link {color:blue;}
A:visited Селектор на псевдокласа Го дефинира стилот на сите посетени врски во елементот А
a:visited {color:red;}
A:active Селектор на псевдокласа Го дефинира стилот на елементот А кога тој е активен (корисникот кликнува на него)
a:active {margin-top:-2px;}
A:focus Селектор на псевдокласа Го дефинира стилот на елементот А кога тој е фокусиран
a:focus {color:blue;}
A:lang (xx) Селектор на псевдокласа Го дефинира стилот на елементот на А кој одговара на ознаката на јазикот (две букви)
a:lang(mk) {color:green;}
A:first-child Селектор на псевдокласа Го дефинира стилот на првото дете на елементот А во нормалниот тек на документот
p:first-child {line-height: 2em;}
A:first-letter Селектор на псевдоелемент Го дефинира стилот на првата буква во елементот А
p:first-letter {font-size:4 em;}
А:first-line Селектор на псевдоелемент Го дефинира стилот на првиот ред на елементот на А
p:first-line {background-color:green;}
А:before Селектор на псевдоелемент Го вметнува текстот на почетокот на елементот А и го дефинира неговиот стил
p.intro:before {content:"почни од овде"; color:gray;}
А:after Селектор на псевдоелемент Го вметнува текстот на карјот на елементот А и го дефинира неговиот стил
p.intro:after {content:"заврши овде"; color:gray;}

Наводи[уреди | уреди извор]

  1. Learn Web Design - Jennifer Niederst Robbins ISBN 978-86-7555-334-2

Надворешни врски[уреди | уреди извор]