Pakārtotais selektors CSS

Pieņemsim, ka mums ir šāds kods:

<p>
	teksts <b><i>treknrakstā slīpraksts</i></b>
</p>
<p>
	teksts <i>tikai slīpraksts</i>
</p>

Pieņemsim, ka vēlamies atlasīt visas i atzīmes, kas ir rindkopu pēcteči. Darīsim to:

p i {
	color: red;
}

Koda izpildes rezultāts:

Tagad atlasīsim tās i atzīmes, kas ir mūsu rindkopu tiešie pēcteči. To mums palīdzēs pakārtotais selektors >.

Lai saprastu, kā to lietot, salīdzināsim to ar pēcteču selektoru. Šādi: p i - mēs atlasīsim visus slīprakstus rindkopu iekšienē, bet šādi: p > i - tikai tos slīprakstus, kas ir rindkopu tiešie pēcteči.

Pielietosim šo selektoru mūsu HTML kodam:

p > i {
	color: red;
}

Koda izpildes rezultāts:

Dots šāds kods:

<ul>
	<li>
		<i>slīpraksts</i>
		<b>treknraksts</b>
		<b><i>treknrakstā slīpraksts</i></b>
	</li>
	<li>
		<i>slīpraksts</i>
		<b>treknraksts</b>
		<b><i>treknrakstā slīpraksts</i></b>
	</li>
</ul>

Izkrāsojiet sarkanā krāsā tikai tās b atzīmes, kas ir li atzīmju tiešie pēcteči.