CSS: Combinators
In CSS, combinators are used to select content by combining selectors in specific relationships. There are different types of relationships that can be used to combine selectors.
Descendant combinator
The descendant combinator is represented by a space “ ” and typically used between two selectors. It selects the second selector if the first selector is the ancestor (parent, parent parent's) element. These selectors are called the descendant selectors.
.cover p {
color: red;
}
<div class="cover"><p>Text in .cover</p></div>
<p>Text not in .cover</p>
In this example, the text “Text in .cover” will be displayed in red.
Child combinators
The child combinator is represented by “>” and is used between two selectors. In this, an element is only selected if the second selector is the direct child of the first selector element. This means there should not be any other selector between the first selector element and second element selector.
ul > li {
border-top: 5px solid red;
}
<ul>
<li>Unordered item</li>
<li>Unordered item
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ul>
In this example, the <li> element with the text “Unordered item” will have a red top border.
Adjacent sibling combinator
The adjacent sibling combinator is represented by “+” is placed between the two CSS selector. In this element is selected if the selector element is directly followed by the first element selector or only the adjacent sibling
h1 + span {
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}
<div>
<h1>A heading</h1>
<span>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</span>
<span>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</span>
</div>
In this example, the first element will have the given CSS properties.
General sibling combinator
The general sibling combinator is represented by “~“. It selects all the sibling element, not only the direct sibling element, then we use the general sibling combinator.
h1 ~ h2 {
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}
<article>
<h1>A heading</h1>
<h2>I am a paragraph.</h2>
<div>I am a div</div>
<h2>I am another paragraph.</h2>
</article>
In this example, every <h2> element will have the given CSS properties.
CSS combinators provide powerful ways to select and style content based on their relationships in the HTML structure. By understanding combinators, we can create clean, maintainable, and responsive web designs.
Cheers!
References – MDN Web Docs