Thursday, 22 July 2021

CSS Selectors - CSS Combinators

 CSS Combinators

A combinator is something that explains the relationship between the selectors.

There are four different combinators in CSS:

descendant selector (space)

child selector (>)

adjacent sibling selector (+)

general sibling selector (~)

Descendant Selector

selects all <p> elements inside <div> elements:

div p {

  background-color: yellow;


Child Selector (>)

selects all <p> elements that are children of a <div> element:

div > p {

  background-color: yellow;


element element div p Selects all <p> elements inside <div> elements

element>element div > p Selects all <p> elements where the parent is a <div> element

element+element div + p Selects the first <p> element that are placed immediately after <div> elements

element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p> element





div p

















div > p (div ke inside ke sabhi p)

Hello Noida and Delhi in red color

div > p (div ke inside wale direct child p)

Hello and Delhi in red color

div + p (div ke close hone ke baad wala p)

UP in red color

div ~ p  (div ke close hone ke baad ke sabhi p)

UP and Meerut in red color

No comments:

Post a Comment