Pakārtotais selektors CSS

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

html<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:

cssp 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:

cssp > i {
  color: red;
}

Koda izpildes rezultāts:

html<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>