Categories
CSS combinators are used to select elements based on their relationships with other elements in the HTML document. There are four types of combinators in CSS:
1. Descendant combinator (space): The descendant combinator selects an element that is a descendant of another specified element. It applies styles to elements that are inside another element, regardless of how deeply nested they are.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Descendant Combinator Example</title>
<style>
div p {
color: blue;
}
</style>
</head>
<body>
<div>
<p>This text is blue.</p>
</div>
</body>
</html>
In this example, the div p selector applies the blue color to the p element inside the div.
2. Child combinator (>): The child combinator selects an element that is a direct child of another specified element. It applies styles only to immediate children of a parent element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Child Combinator Example</title>
<style>
ul > li {
color: red;
}
</style>
</head>
<body>
<ul>
<li>This text is red.</li>
<li>This text is also red.</li>
<div>
<li>This text is not red.</li>
</div>
</ul>
</body>
</html>
In this example, the ul > li selector applies the red color only to the direct li children of the ul element.
3. Adjacent sibling combinator (+): The adjacent sibling combinator selects an element that is immediately preceded by another specified element. It applies styles only to the first element that directly follows the specified element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Adjacent Sibling Combinator Example</title>
<style>
h2 + p {
font-weight: bold;
}
</style>
</head>
<body>
<h2>Heading 2</h2>
<p>This paragraph will have bold font-weight.</p>
<div>
<h2>Another Heading 2</h2>
<p>This paragraph will not have bold font-weight.</p>
</div>
</body>
</html>
In this example, the h2 + p selector applies the bold font-weight to the p element that immediately follows the h2.
4. General sibling combinator (~): The general sibling combinator selects an element that is a sibling of another specified element, but it does not need to be immediately preceded by that element. It applies styles to all matching sibling elements that follow the specified element.
Example:
<!DOCTYPE html>
<html>
<head>
<title>General Sibling Combinator Example</title>
<style>
h2 ~ p {
color: green;
}
</style>
</head>
<body>
<h2>Heading 2</h2>
<p>This paragraph will have green color.</p>
<div>
<h2>Another Heading 2</h2>
<p>This paragraph will also have green color.</p>
</div>
</body>
</html>
In this example, the h2 ~ p selector applies the green color to all p elements that are siblings of the h2 element.
These examples illustrate how CSS combinators can be used to target specific elements based on their relationships with other elements. Understanding combinators allows you to write more specific and targeted CSS rules for your webpages.