CSS COMBINATORS


Selectors are the patterns used to select the elements for styling. A CSS selector can be a simple selector or more than one selectors can also be connected using combinators.

Four types of combinators are available in CSS:

  • Child selector (>)
  • Descendant selector (space)
  • General Sibling selector (~)
  • Adjacent Sibling selector (+)

Child Selector (>)


The > operator is used to select the element that is the immediate child of the specified tag.

This combinator is stricter than the descendant selector because it selects only the second selector if it has the first selector element as its parent.


For example:


<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
div > p {
  color: #009900;
  font-size:32px;
}
</style>
</head>
<body>

<p>Let's learn child selector property</p>
<div>
<p> this is styled as it is with-in div tag</p> <!-- style applied on this -->
<p> making both tags, child of div tag</p> <!-- style applied on this -->
<section>
<p>descendant is not styled, even if inside div tag</p> <!-- style not applied on this -->
</section>
</div>
<p>this is not styled since it is not inside div tag</p> <!-- style not applied on this -->
<p>hence, not a child of div</p>

</body>
</html>
Live Demo!


Descendant selector


This selector is used to select all the child elements of the specified tag, including descendants.

For example:


<!DOCTYPE html>
<html>
<head>
<style>
div p{
  color: #009900;
  font-size:32px;
}
</style>
</head>
<body>

<p>Let's learn descendant selector property</p>
<div>
<p> this is child of div</p> <!-- style applied on this -->
<p> this is a child of div</p> <!-- style applied on this -->
<section>
<p>this is a descendant of div</p> <!-- style applied on this -->
</section>
</div>
<p>not inside div</p> <!-- style not applied on this -->

</body>
</html>
Live Demo!


General Sibling selector (~)


The ~ selector is used to select all elements that are siblings of a specified element. Hence, it can be used to select a group of elements that share the same parent element.

The following example selects all <p> elements that are siblings of <div> elements.


Example:


<!DOCTYPE html>
<html>
<head>
<style>
div ~ p{
  color: #009900;
  font-size:32px;
}
</style>
</head>
<body>

<p> Let's learn combinators</p>
<div>General sibling selector property</div>
<p>sibling selector</p> <!-- style applied on this -->
<p>This line will get the styling</p> <!-- style applied on this -->
<p>As well as this one</p> <!-- style applied on this -->

</body>
</html>
Live Demo!


Adjacent Sibling selector (+)


The + operator is used to select the element that is directly next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.

Example: 


<!DOCTYPE html>
<html>
<head>
<title>Combinator Property
<style>
div + p {
  color: #009900;
  font-size:32px;
}
</style>
</head>
<body>

<p>Let's learn adjacent selector</p>
<div>
<p> we see no style effect here.</p>
</div>
<p>this is styled as it comes right after a div tag</p>
<p>Also comes after a div tag but will not get styled</p>

</body>
</html>
Live Demo!