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