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;}

Наводи

Надворешни врски