Combinatori CSS
Combinatorii exprimă relația dintre două sau mai multe selectoare.
Un selector CSS poate fi construit din mai multe selectoare, iar un combinator pus între ele face selecția mai specifică.
CSS oferă patru: combinatorul descendent (spațiu), combinatorul copil (>), combinatorul fratelui următor (+) și combinatorul fraților următori (~).
Combinatorul Descendent (spațiu)
Copiii, nepoții și tot ce este mai adânc se numără ca descendenți, iar acest combinator îi selectează pe toți cei de sub elementul specificat.
Exemplu
Se selectează fiecare <p> din interiorul unui <div>.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Descendant Combinator</title>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Descendant Combinator</h2>
<p>This paragraph is not inside a div.</p>
<div>
<p>Paragraph 1 inside the div.</p>
<p>Paragraph 2 inside the div.</p>
<section>
<p>Paragraph inside a section, inside the div (still a descendant).</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>
Combinatorul Copil (>)
Combinatorul copil selectează doar copiii direcți ai elementului specificat.
Exemplu
Aici un <p> este selectat doar dacă este copil direct al unui <div>.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Child Combinator</title>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Child Combinator</h2>
<p>This paragraph is not inside a div.</p>
<div>
<p>Paragraph 1 in the div (direct child).</p>
<p>Paragraph 2 in the div (direct child).</p>
<section>
<p>Paragraph inside a section (not a direct child of div).</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>
Combinatorul Fratelui Următor (+)
Două elemente sunt frați când au același părinte. Combinatorul fratelui următor selectează singurul element aflat imediat după elementul specificat.
Exemplu
Este selectat doar primul <p> care vine imediat după un <div>.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Next Sibling Combinator</title>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Next Sibling Combinator (+)</h2>
<p>This paragraph is before the div.</p>
<div>
<p>Paragraph inside the div.</p>
</div>
<p>This paragraph is immediately after the div (selected).</p>
<p>This paragraph is also after the div but not immediately (not selected).</p>
</body>
</html>
Combinatorul Fraților Următori (~)
Dacă combinatorul anterior se oprește la un singur element, combinatorul fraților următori selectează toți frații următori ai elementului specificat.
Exemplu
Este selectat fiecare <p> care vine după un <div> ca frate al lui.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Subsequent-sibling Combinator</title>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<h2>Subsequent-sibling Combinator (~)</h2>
<p>Paragraph 1 (before the div, not selected).</p>
<div>
<p>Paragraph inside the div.</p>
</div>
<p>Paragraph 2 (sibling after the div, selected).</p>
<p>Paragraph 3 (sibling after the div, selected).</p>
</body>
</html>