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

Background Attachment
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

Background Attachment
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
-->

Output

Background Attachment
Live Preview


CSS Tutorial


Properties Reference


Cascading Style Sheet


Flexbox Tutorial


CSS Grid Tutorial


Transitions Properties


CSS Properties with Examples


CSS Selectors


CSS Pseudo Elements


CSS Attribute Selectors


Input Pseudo Classes


CSS Examples


CSS Animation Projects