CSS Combinator Selectors

CSS Combinator Selectors

CSS Combinator defines the relationship between the selectors. A CSS Combinator can be used between two CSS Selectors. There are 4 types of CSS Combinators.

Descendant Combinator (space)

The Descendant Combinator selects all HTML Elements that are descendants of a specified element.

div a {
color: red;
}

The above example will select all anchor elements that are descendants of Div element or that are inside Div element.

Child Combinator (>)

The Child Combinator (>) selects all HTML Elements that are children of a specified element.

div > p {
font-size:20px;
}

The above example will select all paragraph elements that are children of Div element.

Adjacent Sibling Combinator (+)

The Adjacent Sibling Combinator (+) selects the immediately following specified HTML Element after another specified element, Both element must be children of the same parent element or they must be siblings.

div + p {
background-color: red;
}

The above example will select the first paragraph element that is placed immediately after Div element and is also it's sibling.

General Sibling Combinator (~)

The General Sibling Combinator (~) selects all specified HTML Elements that are placed after another specified element and they must be children of the same parent element.

div ~ p {
background-color: blue;
}

The above example will select all paragraph elements that are sibling of div element and are placed after div element.

More CSS Selectors

Simple CSS SelectorsCSS Attribute SelectorsCSS Attribute Value SelectorsCSS Pseudo Class SelectorsCSS Pseudo Elements Selectors

Post a Comment

Previous Post Next Post