CSS-yhdistimet

CSS-yhdistimet

Yhdistin on mekanismi, joka selittää valitsinten välisiä suhteita.

CSS-valitsimet voivat sisältää useita yksinkertaisia valitsimia. Yksinkertaisten valitsimien välillä voidaan käyttää yhdistintä.

CSS:ssä on neljä erilaista yhdistintä:

  • Lapsivalitsin (tyhjä aukko)
  • Alivalitsin (>)
  • Lähellä olevat veljivelit (+)
  • Yleiset veljivelit (~)

Lapsivalitsin

Lapsivalitsin sopii kaikkiin määritetyn elementin lapsiin.

Seuraavassa esimerkissä valitaan kaikki <div>-elementin sisällä olevat <p>-elementit:

Esimerkki

div p {
  background-color: yellow;
}

Kokeile itse

Alivalitsin

Alivalitsin sopii kaikkiin määritetyn elementin alielementteihin.

Seuraavassa esimerkissä valitaan kaikki <div>-elementin alielementit, jotka ovat <p>-elementtejä:

Esimerkki

div > p {
  background-color: yellow;
}

Kokeile itse

Lähellä olevien veljivelien valitsin

Lähellä olevien veljivelien valitsin sopii kaikkiin lähellä oleviin samantasoisiin elementteihin.

Veljivelit (samantasoiset) täytyy olla samassa isäelementissä, ja 'läheinen' tarkoittaa 'jäljessä'.

Seuraavassa esimerkissä valitaan kaikki <div>-elementin jälkeen olevat <p>-elementit:

Esimerkki

div + p {
  background-color: yellow;
}

Kokeile itse

Yleiset veljivelit

Yleiset veljivelit valitsivat kaikki samantasoiset elementit, jotka kuuluvat määritettyyn elementtiin.

Seuraavassa esimerkissä valitaan kaikki <div>-elementin samantasoiset elementit, jotka ovat <p>-elementtejä:

Esimerkki

div ~ p {
  background-color: yellow;
}

Kokeile itse

Kaikki CSS-yhdistelmävalitsimet

Valitsin Esimerkki Esimerkkidesc
element element div p Valitse kaikki <div>-elementin sisällä olevat <p>-elementit.
element>element div > p Valitse kaikki <p>-elementit, joiden vanhempi-elementti on <div>-elementti.
element+element div + p Valitse kaikki <p>-elementit, jotka sijaitsevat <div>-elementin jälkeen.
element1~element2 p ~ ul Valitse kaikki <ul>-elementit, joissa on <p>-elementti ennen sitä.

Lisää tietoa

Kirjat:CSS-lapsivalitsin

Kirjat:CSS-tytärvalitsin

Kirjat:CSS-lähimmät-siamesiskelvyn-valitsin