Kontekstivalitsin CSS:ssä

Kontekstivalitsin, joka esitetään välikomento (' '), mahdollistaa elementtien valitsemisen, jotka on sijoitettu tietyn vanhempielementin sisään

Syntaksi

cssvalitsin1 valitsin2 {
  
}

Esimerkki

Kohdistetaan kaikkiin p -elementteihin div -elementtien sisällä ja värjätään ne punaisiksi väriin:

html<div>
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

cssdiv p {
  color: red;
}

Результат:

Esimerkki

Kohdistetaan kaikkiin p -elementteihin elementin #elem sisällä ja värjätään ne punaisiksi väriin:

html<div id="elem">
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

css#elem p {
  color: red;
}

Результат:

Esimerkki

Kohdistetaan kaikkiin p -elementteihin elementtien, joilla on luokka .block, sisällä ja värjätään ne punaisiksi väriin:

html<div class="block">
  <p>
    teksti
  </p>
  <p>
    teksti
  </p>
</div>

css.block p {
  color: red;
}

Результат:

Esimerkki

Kohdistetaan kaikkiin b -elementteihin p -elementtien sisällä, jotka sijaitsevat div -elementtien sisällä, ja värjätään ne punaisiksi väriin:

html<div>
  <p>
    teksti <b>+</b>
  </p>
</div>

cssdiv p b {
  color: red;
}

Результат:

Katso myös