A kombinátor olyan dolog, amely megmagyarázza a szelektorok közötti kapcsolatot.
Egy CSS-választó több egyszerű választót is tartalmazhat. Az egyszerűek között szelektorok, beépíthetünk egy kombinátort is.
A CSS-ben négy különböző kombinátor található:
leszármazott választó (szóköz)
gyermekválasztó (>)
szomszédos testvérválasztó (+)
általános testvérválasztó (~)
A leszármazott választó minden olyan elemhez illeszkedik, amely egy meghatározott leszármazottja elem.
A következő példa az összes <p> elemet kiválasztja a <div> elemeken belül:
div p {
background-color: yellow;
}Próbálja ki Ön is →
<!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>
A gyermekválasztó kiválasztja az összes olyan elemet, amely a gyermeke meghatározott elem.
A következő példa az összes <p> elemet kiválasztja <div> gyermekei elem:
div > p {
background-color: yellow;
}Próbálja ki Ön is →
<!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>
A szomszédos testvérválasztó egy olyan elem kiválasztására szolgál, amely közvetlenül van egy másik konkrét elem után.
A testvérelemeknek azonos szülőelemekkel kell rendelkezniük, a „szomszédos” pedig azt jelenti "azonnal utána".
A következő példa az első <p> elemet választja ki, amely közvetlenül a <div> elemek után kerül elhelyezésre:
div + p {
background-color: yellow;
}Próbálja ki Ön is →
<!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>
Az általános testvérválasztó kiválasztja az összes olyan elemet, amely egy adott elem következő testvére.
A következő példa az összes <p> elemet kiválasztja, amelyek a <div> elemek következő testvérei:
div ~ p {
background-color: yellow;
}Próbálja ki Ön is →
<!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élda :
div p
Példa leírás:
Kijelöli az összes <p> elemet a <div> elemeken belül
Példa :
div > p
Példa leírás:
Kijelöli az összes <p> elemet, ahol a szülő <div> elem
Példa :
div + p
Példa leírás:
Kijelöli az első <p> elemet, amely közvetlenül a <div> elemek után kerül elhelyezésre
Példa :
p ~ ul
Példa leírás:
Kijelöl minden <ul> elemet, amelyet egy <p> elem előz meg