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älkijonon valitsin vastaa kaikkia elementtejä, jotka ovat määritetyn jälkeläisiä elementti.
Seuraava esimerkki valitsee kaikki <p>-elementit <div>-elementtien sisällä:
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>
Lapsivalitsin valitsee kaikki elementit, jotka ovat a:n lapsia määritetty elementti.
Seuraava esimerkki valitsee kaikki <p>-elementit, jotka ovat <div>:n lapset elementti:
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 (>) 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>
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:
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 valitsee kaikki elementit, jotka ovat tietyn elementin seuraavat sisarukset.
Seuraava esimerkki valitsee kaikki <p>-elementit, jotka ovat <div>-elementtien seuraavat sisarukset:
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>
Esimerkki:
div p
Esimerkkikuvaus:
Valitsee kaikki <p>-elementit <div>-elementtien sisällä
Esimerkki:
div > p
Esimerkkikuvaus:
Valitsee kaikki <p>-elementit, joissa pääelementti on <div>
Esimerkki:
div + p
Esimerkkikuvaus:
Valitsee ensimmäisen <p>-elementin, joka sijoitetaan välittömästi <div>-elementtien jälkeen
Esimerkki:
p ~ ul
Esimerkkikuvaus:
Valitsee jokaisen <ul>-elementin, jota edeltää <p>-elementti