1. Types of Combined Selectors
CSS combined selectors let you target elements based on their hierarchical relation to other elements. This makes them super helpful for styling elements contextually or when you're working with a complex structure. Combined selectors are a powerful tool for precise selection when a single class or ID isn't enough. Let's explore the main types, including the descendant selector, child selector, adjacent sibling selector, and general sibling selector.
Combined selectors in CSS provide various ways to select elements based on the HTML hierarchy. The main types of combined selectors are:
- Descendant Selector: selects elements located inside another element at any nesting level.
- Child Selector: selects only the direct (immediate) children of a specific element.
- Adjacent Sibling Selector: selects an element that immediately follows another element at the same level of hierarchy.
- General Sibling Selector: selects all elements at the same level that come after a specified element.
Each of these selectors works for different cases, allowing you to make precise selections based on their position on the page.
2. Descendant Selector
The descendant selector selects all elements inside another element, regardless of nesting depth. It's written as a space between selectors. This type is handy when you want to style elements inside another, e.g., all <p> tags inside a <div> with a specific class.
.container p {
color: blue;
}
<div class="container">
<p>This text will be blue because it's inside the container.</p>
<div>
<p>This text will also be blue.</p>
</div>
</div>
<p>This text will remain unchanged because it's not inside the container.</p>
Here, the selector .container p will select all <p> tags inside the element with the class container, including nested ones.
3. Child Selector
The child selector only selects the immediate children of an element. It's written using the > symbol between selectors. This is great when you want to apply styles only to top-level elements and not deeper ones.
.container > p {
font-weight: bold;
}
<div class="container">
<p>This text will be bold.</p>
<div>
<p>This text will remain normal because it's not a direct child of container.</p>
</div>
</div>
Here, only the first <p> will be bold as it's a direct child of .container, while the nested <p> remains unchanged.
4. Adjacent Sibling Selector
The adjacent sibling selector selects an element that directly follows another element at the same level. It uses the + symbol between selectors and is useful for styling an element that comes immediately after another, like the first paragraph following a heading.
h2 + p {
color: green;
}
<h2>Heading</h2>
<p>This text will turn green because it follows the heading immediately.</p>
<p>This text won't change because it's not the adjacent sibling of h2.</p>
Here, the selector h2 + p affects only the first <p> that comes right after <h2>.
5. General Sibling Selector
The general sibling selector selects all elements at the same hierarchy level that come after a specified element, regardless of whether they're right next to it or several elements away. It uses the ~ symbol between selectors.
h2 ~ p {
font-style: italic;
}
<h2>Heading</h2>
<p>This paragraph will be italic.</p>
<div>
<p>This paragraph will also be italic because it's a general sibling of h2.</p>
</div>
In this example, the h2 ~ p selector picks every <p> that comes after <h2> at the same level, no matter if there are other elements between them.
6. Example Using All Combined Selectors
Below is an example of HTML and CSS demonstrating the use of all combined selectors to target different elements based on their placement on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Combined Selectors Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>A paragraph that is both a descendant and a direct child of .container.</p>
<div>
<p>A paragraph that is a descendant but not a direct child of .container.</p>
</div>
</div>
<h2>Heading</h2>
<p>A paragraph that is an adjacent sibling of h2.</p>
<div>This block won't affect the following paragraphs.</div>
<p>A paragraph that is a general sibling of h2.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Combined Selectors Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<p>A paragraph that is both a descendant and a direct child of .container.</p>
<div>
<p>A paragraph that is a descendant but not a direct child of .container.</p>
</div>
</div>
<h2>Heading</h2>
<p>A paragraph that is an adjacent sibling of h2.</p>
<div>This block won't affect the following paragraphs.</div>
<p>A paragraph that is a general sibling of h2.</p>
</body>
</html>
/* Descendant Selector */
.container p {
color: blue;
}
/* Child Selector */
.container > p {
font-weight: bold;
}
/* Adjacent Sibling Selector */
h2 + p {
color: green;
}
/* General Sibling Selector */
h2 ~ p {
font-style: italic;
}
GO TO FULL VERSION