CSS селектори
CSS-селектори се збир од правила кои помагаат во одбирањето на одреден елемент или ознака во некој HTML-документ.
Селектор | Тип на селектор | Опис |
---|---|---|
* | Универзален селектор | Одговара на сите елементи * {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;}
|
Наводи
уреди- ↑ Learn Web Design - Jennifer Niederst Robbins ISBN 978-86-7555-334-2