Combinator selectors in CSS define the relationship between selectors. There are four main types:
- Descendant
- Child
- Adjacent sibling
- General sibling
Combinators are used to target HTML elements based on their position and relationship within the document structure (DOM).
Descendant Combinator
Description: The descendant combinator, denoted by a space between two selectors (E F), selects all elements (F) that are children of a specified element (E), no matter how many levels deep.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div p {
color: blue; /* Selects all <p> elements within any <div> */
}
</style>
</head>
<body>
<div>
<p>This paragraph is inside a div.</p>
<section>
<p>This paragraph is inside a section, which is inside a div.</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>In this example, both <p> elements within the <div> will have blue text.
Child Combinator:
Description: The child combinator, represented by the greater than symbol (E > F), selects only those elements (F) that are direct children of a specified element (E). Elements nested further down will not be selected.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
color: green; /* Selects only <p> elements that are direct children of a <div> */
}
</style>
</head>
<body>
<div>
<p>This paragraph is a direct child of the div.</p>
<section>
<p>This paragraph is inside a section, so it's not a direct child of the div.</p>
</section>
</div>
<p>This paragraph is not inside a div.</p>
</body>
</html>Here, only the first <p> element will have green text because it’s a direct child of the <div>. The second <p> is a grandchild, and the third is not within a <div> at all.
Adjacent Sibling Combinator:
Description: The adjacent sibling combinator, represented by the plus symbol (E + F), selects an element (F) that immediately follows another specified element (E) and shares the same parent. The selected element must come directly after the first in the HTML structure.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
h2 + p {
font-weight: bold; /* Selects a <p> element that immediately follows an <h2> element */
}
</style>
</head>
<body>
<h2>Heading</h2>
<p>This paragraph is adjacent to the h2, so it will be bold.</p>
<p>This paragraph is not immediately after the h2.</p>
<h2>Another Heading</h2>
<div>
<p>This paragraph is inside a div, so it's not an adjacent sibling of the h2.</p>
</div>
</body>
</html>In this case, only the first <p> element will have bold text because it is the immediate sibling following the <h2>.
General Sibling Combinator:
Description: The general sibling combinator, represented by the tilde symbol (E ~ F), selects all elements (F) that are siblings of a element (E) and come after it in the HTML structure. They don’t have to be immediately adjacent.
Code Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 ~ p {
color: red; /* Selects all <p> elements that are siblings of an <h1> element and come after it */
}
</style>
</head>
<body>
<p>This paragraph comes before the h1.</p>
<h1>Main Title</h1>
<p>This paragraph is a sibling of the h1 and comes after it, so it's red.</p>
<h2>Sub Title</h2>
<p>This paragraph is also a sibling of the h1 (they share the same parent) and comes after it, so it's also red.</p>
<div>
<p>This paragraph is inside a div, so it's not a sibling of the h1.</p>
</div>
</body>
</html>Here, the two <p> elements that appear after the <h1> and share the same parent will have red text. The first paragraph (before the <h1>) and the paragraph nested within the <div> are not selected.
Combinators are fundamental tools in CSS for precisely targeting elements based on their relationships within the HTML document, allowing for more specific and efficient styling.
CSS3 Topics