Combinator Property in CSS

This Combinators clarifies the relationship between two selectors, whereas the selectors in CSS are used to select the content for styling. There can be more than one simple selector in a CSS selector, and between these selectors, we can include a combinator.

Value	used for
Descendant	the descendant selector is used. Successors include all the children of an element, may it be a direct child or a child multiple levels down the DOM tree. It is represented using a space between the parent and child element.
Direct child	It is different from the descendant selector in a way that it selects only the direct children of an element.
Adjacent Sibling	This is represented by using a plus (+) sign between the two elements.
General Sibling	The siblings of an element that share the same parent. It represented by a tilde (~) sign.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box p{
      color:red;
    }
    .box p span{
      color:blue;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
    <p>Lorem ipsum dolor <span>Joes</span> sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
  </div>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
</body>
</html>

<!--
Combinators Selectors
   1. Descendant
   2. Direct child
   3. Adjacent Sibling
   4. General Sibling
-->

Output

Live Preview

Direct

This direction property specifies the text direction/writing direction within a block-level element.The direction CSS property sets the direction of text, table columns, and horizontal overflow.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box>p{
      color:blue;
    }
    .box+p{
      color:green;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
    <p>Lorem ipsum dolor <span>Joes</span> sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
    <div class="inner-box">
      <p>Inner Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
    </div>
  </div>
  <p>Outter Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
</body>
</html>

<!--
Combinators Selectors
   1. Descendant
   2. Direct child
   3. Adjacent Sibling
   4. General Sibling
-->

Output

Live Preview

General

This general sibling selector selects all elements that are next siblings of a specified element.

Source Code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   
   .box ~ p{
    color:blue;
   }
  </style>
</head>
<body>
  <h1>General Sibling</h1>
  <div class="box">
    <p>box - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
    <p>box - -  Lorem ipsum dolor <span>Joes</span> sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
  </div>
  <p>Outter Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
  <p>Outter Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
  <div class="box2">
    <p>box2--- Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus, nihil nobis consequatur corporis quis magnam.</p>
  </div>
</body>
</html>

<!--
Combinators Selectors
   1. Descendant
   2. Direct child
   3. Adjacent Sibling
   4. General Sibling
-->