CSS Combinators

CSS Combinators

The final selectors we will look at are called combinators, because they combine other selectors in a way that gives them a useful relationship to each other and the location of content in the document.

There are four types of combinators available in CSS which are discussed below:

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

 

1. 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.

CODE:

 

Result:

 

2. 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.

CODE:

 

Result:

3. 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.

CODE:

 

Result:

4. Descendant Selector
The descendant selector matches all elements that are descendants of a specified element.

The following example selects all <p> elements inside <div> elements:

CODE:

 

Result:

All CSS Combinator Selectors

 

 

You may also like: CSS Float

 

 

 

Leave a Comment

Your email address will not be published.