⊗mkPmSlDSCC 61 of 250 menu

Комплексне комбинације селектора потомака и класа у ЦСС-у

Нека сада имамо следећи код:

<div class="block"> <h2 class="header">Наслов х2</h2> <p> текст </p> <h3 class="header">Наслов х3</h3> <p> текст </p> <p> текст </p> </div> <div class="block"> <h2 class="header">Наслов х2</h2> <p> текст </p> <h3 class="header">Наслов х3</h3> <p> текст </p> <p> текст </p> </div>

Хајде да пронађемо све елементе са класом header, који се налазе унутар елемента са класом block, и задамо им фонт Arial:

.block .header { font-family: Arial; }

Као што се види у ХТМЛ коду, унутар елемента са класом block елементи са класом header могу бити и наслови h2, и наслови h3. Хајде да напишемо селекторе који разликују ове наслове, и нешто урадимо са тим насловима.

Хајде да изаберемо све h2 са класом header, који се налазе унутар елемента са класом block:

.block h2.header { font-size: 30px; color: red; }

А сада изаберимо све h3 са класом header, који се налазе унутар елемента са класом block:

.block h3.header { font-size: 20px; color: green; }

Хајде да сакупимо цео наш ЦСС заједно:

.block .header { font-family: Arial; } .block h2.header { font-size: 30px; color: red; } .block h3.header { font-size: 20px; color: green; }

Применимо га на наш ХТМЛ код:

Објасните шта бира селектор у наведеном коду испод. Затим напишите ХТМЛ код који одговара том селектору. Ево кода са селектором:

.eee .bbb { color: red; }

Објасните шта бира селектор у наведеном коду испод. Затим напишите ХТМЛ код који одговара том селектору. Ево кода са селектором:

.eee h2 { color: red; }

Објасните шта бира селектор у наведеном коду испод. Затим напишите ХТМЛ код који одговара том селектору. Ево кода са селектором:

.eee h2.bbb { color: red; }

Објасните шта бира селектор у наведеном коду испод. Затим напишите ХТМЛ код који одговара том селектору. Ево кода са селектором:

.eee h3.bbb { color: red; }

Објасните шта бира селектор у наведеном коду испод. Затим напишите ХТМЛ код који одговара том селектору. Ево кода са селектором:

.eee p.bbb { color: red; }

Објасните шта бира селектор у наведеном коду испод. Затим напишите ХТМЛ код који одговара том селектору. Ево кода са селектором:

.eee .bbb .kkk { color: red; }
Српски
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItaliano日本語ქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
Користимо колачиће за рад сајта, аналитику и персонализацију. Обрада података се врши у складу са Политиком приватности.
прихвати све подеси одбиј