CSS Combinators

Last Updated : 11 May, 2026

CSS combinators define the relationship between two selectors. CSS selectors are patterns used to select elements for styling.

  • A CSS selector can be simple or complex, consisting of more than one selector connected using combinators.
  • Understanding these combinators is essential for precise and efficient styling in CSS.

Types of CSS Combinators

1. General Sibling selector(~)

The general sibling selector selects elements that follow a specified element and share the same parent. This can be useful for selecting groups of elements with the same parent.

HTML 


<html>
  
<head>
    <title>Combinator Propertytitle>


    <style>
        div ~ p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
    style>


head>

<body>
    <div>General sibling selector propertydiv>
    <p>GeeksforGeeksp>
    <div>
        <div>child div contentdiv>
        <p>G4Gp>
    div>
    <p>Geeksp>
    <p>Hellop>
body>
  
html>

2. Adjacent Sibling selector(+)

The adjacent sibling selector selects an element that is immediately next to a specified element. This selector selects only the next sibling.

HTML 


<html>
<head>
    <title>Combinator Propertytitle>


    <style>
        div + p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    style>


head>

<body>
    <div>Adjacent sibling selector propertydiv>
    <p>GeeksforGeeksp>
    <div>
        <div>child div contentdiv>
        <p>G4Gp>
    div>
    <p>Geeksp>
    <p>Hellop>
body>
  
html>

3. Child Selector(>)

The child selector selects elements that are direct children of a specified element. This combinator is stricter than the descendant selector, as it selects only the direct children.

HTML 


<html>
  
<head>
    <title>Combinator Propertytitle>


    <style>
        div > p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    style>


head>

<body>
    <div>Child selector propertydiv>
    <p>GeeksforGeeksp>
    <div>
        <div>child div contentdiv>
        <p>G4Gp>
    div>
    <p>Geeksp>
    <p>Hellop>
body>
  
html>

4. Descendant selector(space)

The descendant selector selects all elements that are descendants of a specified element. These elements can be any level deep within the specified element.

HTML 


<html>
  
<head>
    <title>Combinator Propertytitle>


    <style>
        div p{
            color: #009900;
            font-size:32px;
            font-weight:bold;
            margin:0px;
            text-align:center;
        }
        div {
            text-align:center;
        }
        p {
            text-align:center;
        }
    style>


head>

<body>
    <div>Descendant selector propertydiv>
    <p>GeeksforGeeksp>
    <div>
        <div>child div contentdiv>
        <p>G4Gp>
        <p>Descendant selectorp>
    div>
    <p>Geeksp>
    <p>Hellop>
body>
  
html>
  • Understanding and using CSS combinators effectively can greatly enhance your ability to style web pages precisely.
  • Each combinator serves a unique purpose and can be utilized to target elements based on their relationships within the HTML structure.
  • Mastering these combinators is essential for any web developer looking to create sophisticated and well-structured stylesheets.
Comment

Explore