CSS: Using Combination Selectors

3 min readMar 25, 2023

Introduction CSS is used to style HTML elements and it provides a lot of ways to target elements in an HTML document. One of these ways is through combination selectors. Combination selectors are selectors that allow us to select elements based on their relationship to other elements. This article will cover the different types of combination selectors in CSS and explain how they can be used to style HTML elements.

In order to explain combination selectors, we will use the following HTML template:

<!DOCTYPE html>
<html>
<head>
	<title>Combination Selectors in CSS</title>
	<style type="text/css">
		/* styles go here */
	</style>
</head>
<body>
	<h1>Title</h1>
	<div>
		<p>Paragraph 1</p>
		<p>Paragraph 2</p>
	</div>
	<ul>
		<li>List Item 1</li>
		<li>List Item 2</li>
		<li>List Item 3</li>
	</ul>
	<p>Footer</p>
</body>
</html>

Descendant Selector The descendant selector is used to select elements that are descendants of another element. It is represented by a space between the selectors. For example, to select all the p elements inside the div element in our HTML template, we can use the following CSS code:

div p {
	color: red;
}

This code will make the text of both paragraphs inside the div element red.

Child Selector The child selector is similar to the descendant selector, but it only selects elements that are direct children of another element. It is represented by the > symbol between the selectors. For example, to select all the li elements that are direct children of the ul element in our HTML template, we can use the following CSS code:

ul > li {
	background-color: yellow;
}

This code will make the background color of all list items inside the ul element yellow.

Adjacent Sibling Selector The adjacent sibling selector is used to select the element that is immediately after another element. It is represented by the + symbol between the selectors. For example, to select the p element that is immediately after the h1 element in our HTML template, we can use the following CSS code:

h1 + p {
	font-weight: bold;
}

This code will make the text of the first paragraph after the h1 element bold.

General Sibling Selector The general sibling selector is similar to the adjacent sibling selector, but it selects all the elements that are siblings of another element. It is represented by the ~ symbol between the selectors. For example, to select all the p elements that are siblings of the h1 element in our HTML template, we can use the following CSS code:

h1 ~ p {
	text-decoration: underline;
}

This code will underline the text of both paragraphs after the h1 element.

Conclusion

Combination selectors in CSS are powerful tools that allow us to select elements based on their relationship to other elements. They can be used to target specific elements and apply different styles to them. The descendant selector, child selector, adjacent sibling selector, and general sibling selector are the most commonly used combination selectors in CSS. By using these selectors, we can create complex CSS rules that will help us style our HTML documents in a more efficient way.

CSS: Using Combination Selectors

Written by Dimeji