CSS-yhdistelmät


Sisällysluettelo

    Näytä sisällysluettelo


CSS-yhdistelmät

Kombinaattori on jotain, joka selittää valitsimien välisen suhteen.

CSS-valitsin voi sisältää useamman kuin yhden yksinkertaisen valitsimen. Yksinkertaisten väliltä valitsimia, voimme sisällyttää kombinaattorin.

CSS:ssä on neljä eri kombinaattoria:

  • jälkeläisen valitsin (välilyönti)

  • lapsivalitsin (>)

  • viereisen sisaruksen valitsin (+)

  • yleinen sisarusten valitsin (~)


Jälkeläisten valitsin

Jälkijonon valitsin vastaa kaikkia elementtejä, jotka ovat määritetyn jälkeläisiä elementti.

Seuraava esimerkki valitsee kaikki <p>-elementit <div>-elementtien sisällä:

Esimerkki

div p {
  background-color: yellow;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
div p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Descendant Selector</h2>

<p>The descendant selector matches all elements that are descendants of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section><p>Paragraph 3 in the div.</p></section>
</div>

<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>

</body>
</html>



Lapsivalinta (>)

Lapsivalitsin valitsee kaikki elementit, jotka ovat a:n lapsia määritetty elementti.

Seuraava esimerkki valitsee kaikki <p>-elementit, jotka ovat <div>:n lapset elementti:

Esimerkki

div > p {
  background-color: yellow;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Child Selector</h2>

<p>The child selector (&gt;) selects all elements that are the children of a specified element.</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
  <section>
    <!-- not Child but Descendant -->
    <p>Paragraph 3 in the div (inside a section element).</p>
  </section>
  <p>Paragraph 4 in the div.</p>
</div>

<p>Paragraph 5. Not in a div.</p>
<p>Paragraph 6. Not in a div.</p>

</body>
</html>




Viereisen sisaruksen valitsin (+)

Viereisellä sisarusvalitsimella valitaan elementti, joka on suoraan toisen tietyn elementin jälkeen.

Sisarelementeillä on oltava sama pääelementti, ja "viereinen" tarkoittaa "välittömästi perässä".

Seuraava esimerkki valitsee ensimmäisen <p>-elementin, joka sijoitetaan välittömästi <div>-elementtien jälkeen:

Esimerkki

div + p {
  background-color: yellow;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>Adjacent Sibling Selector</h2>

<p>The + selector is used to select an element that is directly after another specific element.</p>
<p>The following example selects the first p element that are placed immediately after div elements:</p>

<div>
  <p>Paragraph 1 in the div.</p>
  <p>Paragraph 2 in the div.</p>
</div>

<p>Paragraph 3. After a div.</p>
<p>Paragraph 4. After a div.</p>

<div>
  <p>Paragraph 5 in the div.</p>
  <p>Paragraph 6 in the div.</p>
</div>

<p>Paragraph 7. After a div.</p>
<p>Paragraph 8. After a div.</p>

</body>
</html>



Yleinen sisarusten valitsin (~)

Yleinen sisarusten valitsin valitsee kaikki elementit, jotka ovat tietyn elementin seuraavat sisarukset.

Seuraava esimerkki valitsee kaikki <p>-elementit, jotka ovat <div>-elementtien seuraavat sisarukset:

Esimerkki

div ~ p {
  background-color: yellow;
}

Kokeile itse →

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
  background-color: yellow;
}
</style>
</head>
<body>

<h2>General Sibling Selector</h2>

<p>The general sibling selector (~) selects all elements that are next siblings of a specified element.</p>

<p>Paragraph 1.</p>

<div>
  <p>Paragraph 2.</p>
</div>

<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>

</body>
</html>




Kaikki CSS-yhdistelmävalitsimet

element element

Esimerkki:

div p

Esimerkkikuvaus:

Valitsee kaikki <p>-elementit <div>-elementtien sisällä

element>element

Esimerkki:

div > p	

Esimerkkikuvaus:

Valitsee kaikki <p>-elementit, joissa pääelementti on <div>

element+element

Esimerkki:

div + p	

Esimerkkikuvaus:

Valitsee ensimmäisen <p>-elementin, joka sijoitetaan välittömästi <div>-elementtien jälkeen

element1~element2

Esimerkki:

p ~ ul	

Esimerkkikuvaus:

Valitsee jokaisen <ul>-elementin, jota edeltää <p>-elementti