Prev Page Next Page
Top

CSS Combinators

➢A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
➢descendant selector (space)
➢child selector (>)
➢adjacent sibling selector (+)
➢general sibling selector (~)

Descendant Selector

➢The descendant selector matches all elements that are descendants of a specified element.

EXAMPLE:

div p {
     background-color: yellow;

}

Run


Child Selector (>)

➢The child selector selects all elements that are the children of a specified element.

EXAMPLE:

div > p {
     background-color: yellow;

}

Run ❯


Adjacent Sibling Selector (+)

➢The adjacent sibling selector is used to select an element that is directly after another specific element.
➢Sibling elements must have the same parent element, and "adjacent" means "immediately following".

EXAMPLE:

div + p {
     background-color: yellow;

}

Run ❯


General Sibling Selector (~)

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

EXAMPLE:

div ~ p {
     background-color: yellow;

}

Run ❯


Prev Page Next Page





FEEDBACK

Rating


Message