En kombinator er noget, der forklarer forholdet mellem vælgerne.
En CSS-vælger kan indeholde mere end én simpel vælger. Mellem det simple vælgere, kan vi inkludere en kombinator.
Der er fire forskellige kombinatorer i CSS:
efterkommervælger (mellemrum)
børnevælger (>)
tilstødende søskendevælger (+)
generel søskendevælger (~)
Descendant-vælgeren matcher alle elementer, der er efterkommere af en specificeret element.
Følgende eksempel vælger alle <p>-elementer inde i <div>-elementer:
div p {
background-color: yellow;
}Prøv det selv →
<!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>
Børnevælgeren vælger alle elementer, der er børn af en specificeret element.
Følgende eksempel vælger alle <p>-elementer, der er børn af en <div> element:
div > p {
background-color: yellow;
}Prøv det selv →
<!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 tilstødende søskendevælger bruges til at vælge et element, der er direkte efter et andet specifikt element.
Søskendeelementer skal have det samme overordnede element, og "tilstødende" betyder "umiddelbart efter".
Følgende eksempel vælger det første <p>-element, der placeres umiddelbart efter <div>-elementer:
div + p {
background-color: yellow;
}Prøv det selv →
<!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 generelle søskendevælger vælger alle elementer, der er næste søskende til et specificeret element.
Følgende eksempel vælger alle <p>-elementer, der er næste søskende til <div>-elementer:
div ~ p {
background-color: yellow;
}Prøv det selv →
<!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>
Eksempel:
div p
Eksempelbeskrivelse:
Vælger alle <p>-elementer inde i <div>-elementer
Eksempel:
div > p
Eksempelbeskrivelse:
Vælger alle <p>-elementer, hvor forælderen er et <div>-element
Eksempel:
div + p
Eksempelbeskrivelse:
Vælger det første <p>-element, der placeres umiddelbart efter <div>-elementer
Eksempel:
p ~ ul
Eksempelbeskrivelse:
Vælger hvert <ul>-element, der er indledt af et <p>-element