En kombinator är något som förklarar förhållandet mellan väljarna.
En CSS-väljare kan innehålla mer än en enkel väljare. Mellan det enkla väljare kan vi inkludera en kombinator.
Det finns fyra olika kombinatorer i CSS:
ättlingsväljare (mellanslag)
barnväljare (>)
intilliggande syskonväljare (+)
allmän syskonväljare (~)
Efterkommandoväljaren matchar alla element som är avkomlingar till en angiven element.
Följande exempel väljer alla <p>-element inuti <div>-element:
div p {
background-color: yellow;
}
Prova själv →
<!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>
Barnväljaren väljer alla element som är barn till en specificerat element.
Följande exempel väljer alla <p>-element som är barn till en <div> element:
div > p {
background-color: yellow;
}
Prova själv →
<!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>
Den intilliggande syskonväljaren används för att välja ett element som är direkt efter ett annat specifikt element.
Syskonelement måste ha samma överordnade element och "intilliggande" betyder "direkt efter".
Följande exempel väljer det första <p>-elementet som placeras omedelbart efter <div>-element:
div + p {
background-color: yellow;
}
Prova själv →
<!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>
Den allmänna syskonväljaren väljer alla element som är nästa syskon till ett angivet element.
Följande exempel väljer alla <p>-element som är nästa syskon till <div>-element:
div ~ p {
background-color: yellow;
}
Prova själv →
<!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>
Exempel:
div p
Exempelbeskrivning:
Markerar alla <p>-element i <div>-element
Exempel:
div > p
Exempelbeskrivning:
Väljer alla <p>-element där föräldern är ett <div>-element
Exempel:
div + p
Exempelbeskrivning:
Väljer det första <p>-elementet som placeras omedelbart efter <div>-element
Exempel:
p ~ ul
Exempelbeskrivning:
Väljer alla <ul>-element som föregås av ett <p>-element