ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

CSS Combinators

CSS Combinators: Here, we are going to learn about the Combinators in CSS (Cascading Style Sheet) with Examples.
Submitted by Anjali Singh, on February 01, 2020

Combinators in CSS are used to explain a relationship between two selectors. A selector can be simple to complex and we can combine any two selectors through combinator.

There are four different combinators in CSS,

  1. General sibling selector (~)
  2. Adjacent sibling selector (+)
  3. Child selector (>)
  4. Descendant selector (space)

Let us understand these combinators one by one...

1) General sibling selector (~)

It is denoted by ~. The general sibling selector as its name suggests is useful to select the elements that are the sibling to a specified element. This can also be used to select the elements who share the same parent element.

Syntax:

    element1 ~ element2{
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div ~ p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

CSS Combinators Example 1

In the above example, two <p> are selected i.e. "C" and "D" because they are a sibling to specified element <div>.

2) Adjacent sibling selector (+)

It is denoted by +. As its name suggests adjacent sibling selector is used to selecting the element that is adjacent to a specified element. This combinator only selects one element that is next to a specified tag.

Syntax:

    element1 + element2{
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div + p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

Output

CSS Combinators Example 2

In the above example, the <p> i.e. "C" is selected as it is a sibling to the specified element <div>.

3) Child selector (>)

It is denoted by >. The child selector selects all the elements that are children of a specified element. It can select more than one element.

Syntax:

    element1 > element2{
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div > p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

CSS Combinators Example 3

In the above example <p> element selected as it is a child of the specified element <div>.

4) Descendant selector (space)

It is denoted by space between two elements. The descendant selector selects all the elements that are descendant to a specified element. This combinator is useful to combine the two selectors such that selected elements have an ancestor the same as the first selector element.

Syntax:

    element1  element2 {
        //CSS styling
    }

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div p {
            font-weight: bold;
            background-color: #f40;
            color: #fff;
            font-size: 32px;
        }
    </style>
</head>

<body>
    <p>A</p>
    <div>
        <p>B</p>
    </div>
    <p>C</p>
    <p>D</p>
</body>

</html>

Output

CSS Combinators Example 4

In the above example <p> is selected because it is a descendant of specified element <div>.

CSS Tutorial & Examples »


ADVERTISEMENT



ADVERTISEMENT



Comments and Discussions

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.