CSS-də Varis Selektoru

Tutaq ki, bizim ul siyahımız və ol siyahımız var:

<ul>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>
<ol>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ol>

Gəlin bu siyahılardakı li teqlərini qırmızı rəngə boyayaq:

li {
	color: red;
}

İndi tutaq ki, biz ul siyahısındakı li teqlərini qırmızı, ol siyahısındakı li teqlərini isə yaşıl rəngə boyamaq istəyirik.

Bu halda bizə varis selektoru kömək edəcək. O, teqləri valideyninə görə seçməyə imkan verir. Bunun üçün valideynin selektorunu, sonra isə boşluq qoyaraq varisin selektorunu göstərmək lazımdır. Bizim halda ul li selektoru ul siyahısındakı bütün li teqlərini seçəcək, ol li selektoru isə ol siyahısındakı bütün li teqlərini seçəcək. Gəlin onları lazımi rənglərə boyayaq:

ul li {
	color: red;
}
ol li {
	color: green;
}

Varis selektorları mütləq iki teq selektorundan ibarət olmalı deyil - onlar boşluqla ayrılmış istənilən sayda ola bilər. Məsələn, aşağıdakı kodda ul teqinin içində olan, öz növbəsində li teqinin içində yerləşən bütün i teqləri seçilir:

ul li i {
	color: red;
}

Aşağıdakı kod verilmişdir:

<ul>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
	<li>text <i>italic</i></li>
</ul>

<p>
	paragraph text <i>italic</i>
</p>
<p>
	paragraph text <i>italic</i>
</p>

ul teqlərindəki kursivi qırmızı, p teqlərindəki kursivi isə yaşıl rəngə boyayın.

Aşağıdakı kod verilmişdir:

<p>
	paragraph text <b><i>bold italic</i></b>
</p>
<p>
	paragraph text <i>italic</i>
</p>

p teqinin içində olan, öz növbəsində b teqinin içində yerləşən kursivi qırmızı rəngə boyayın.