CSS | Combinators

CSS combinators are explaining the relationship between two selectors. CSS selectors are the patterns used to select the elements for style purpose. A CSS selector can be a simple selector or a complex selector consisting of more than one selector connected using combinators.
There are four types of combinators available in CSS which are discussed below:

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

General Sibling selector: The general sibling selector is used to select the element that follows the first selector element and also share the same parent as the first selector element. This can be used to select a group of elements that share the same parent element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Combinator Property</title>
    <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 property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
</html>                    

chevron_right


Output:
combinators property



Adjacent Sibling selector: The Adjacent sibling selector is used to select the element that is adjacent or the element that is the next to the specified selector tag. This combinator selects only one tag that is just next to the specified tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Combinator Property</title>
    <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 property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
</html>                    

chevron_right


Output:
combinators property

Child Selector: This selector 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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Combinator Property</title>
    <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 property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
</html>                    

chevron_right


Output:
combinators property

Descendant selector: This selector is used to select all the child elements of the specified tag. The tags can be the direct child of the specified tag or can be very deep in the specified tag. This combinator combines the two selectors such that selected elements have an ancestor same as the first selector element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>Combinator Property</title>
    <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 property</div>
    <p>GeeksforGeeks</p>
    <div>
        <div>child div content</div>
        <p>G4G</p>
        <p>Descendant selector</p>
    </div>
    <p>Geeks</p>
    <p>Hello</p>
</body>
</html>                    

chevron_right


Output:
combinators property



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.