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


<html>

<head>

<title>CSS+HTML</title>

<style>

div p

{

color:red;

}

</style>

</head>

<body>

<div>

<p>Hello</p>

<b>India</p>

<b><p>Noida</p></b>

<p>Delhi</p>

</div>

<p>UP</p>

<p>Meerut</p>


</body>

</html>


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