CSS Combinators

 CSS Combinators

CSS combinators are explaining the relationship between two selectors. CSS

selectors are the patterns used to select the elements for style purposes. A

CSS selector can be a simple selector or a complex selector consisting of

more than one selector connected using combinators.

Types of CSS Combinators

1) General Sibling selector (~)

 

2) Adjacent Sibling selector (+)

 

3) Child selector (>)

 

4) Descendant selector (space)

 

General Sibling selector 

 

The general sibling selector is used to select the element that follows the first

 selector element and also shares the same parent as the first selector element.

 This can be used to select a group of elements that share the same parent

 element.

 

CSS Code

 

 

 

Output

 

 

Adjacent Sibling selector

 

The Adjacent sibling selector is used to select the element that is adjacent or

 the element that is next to the specified selector tag. This combinator selects

 only one tag that is just next to the specified tag.

 

CSS Code

 

 

Output

 

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. 

CSS Code

 

Output

 

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 the same as the first selector element.

 

CSS Code

 

 

Output