Kombinátor je něco, co vysvětluje vztah mezi selektory.
Selektor CSS může obsahovat více než jeden jednoduchý selektor. Mezi jednoduchými selektory, můžeme zařadit kombinátor.
V CSS existují čtyři různé kombinátory:
selektor potomka (mezera)
dětský volič (>)
sousedící volič sourozenců (+)
obecný volič sourozenců (~)
Selektor potomka odpovídá všem prvkům, které jsou potomky zadaného živel.
Následující příklad vybere všechny prvky <p> uvnitř prvků <div>:
div p {
background-color: yellow;
}Zkuste to sami →
<!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>
Podřízený selektor vybere všechny prvky, které jsou potomky a zadaný prvek.
Následující příklad vybere všechny prvky <p>, které jsou děti <div> živel:
div > p {
background-color: yellow;
}Zkuste to sami →
<!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>
Sousední selektor sourozence se používá k výběru prvku, který je přímo po dalším specifickém prvku.
Sourozenecké prvky musí mít stejný nadřazený prvek a "sousední" znamená „bezprostředně následovat“.
Následující příklad vybere první prvek <p>, který je umístěn bezprostředně za prvky <div>:
div + p {
background-color: yellow;
}Zkuste to sami →
<!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>
Obecný selektor sourozenců vybere všechny prvky, které jsou dalšími sourozenci zadaného prvku.
Následující příklad vybere všechny prvky <p>, které jsou dalšími sourozenci prvků <div>:
div ~ p {
background-color: yellow;
}Zkuste to sami →
<!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>
Příklad:
div p
Příklad popisu:
Vybere všechny prvky <p> uvnitř prvků <div>
Příklad:
div > p
Příklad popisu:
Vybere všechny prvky <p>, kde nadřazeným prvkem je prvek <div>
Příklad:
div + p
Příklad popisu:
Vybere první prvek <p>, který je umístěn bezprostředně za prvky <div>
Příklad:
p ~ ul
Příklad popisu:
Vybere každý prvek <ul>, kterému předchází prvek <p>