CSS-Combinators
CSS Combinators
- In CSS, combinators are used to define relationships between HTML elements to target and style specific elements based on their relationship with other elements.
There are four primary combinators in CSS:
- General Sibling Combinator (~)
- Descendant Combinator (Whitespace)
- Child Combinator (>)
- Adjacent Sibling Combinator (+)
- General Sibling Combinator (~)
General Sibling Selector (~):
- The general sibling combinator selects all elements that share the same parent and are at the same level in the hierarchy as a specified element.
Syntax:
div ~ p {
/*style properties*/
}
Example:
<!DOCTYPE html>
<html>
<head>
<title>General Sibling Selector</title>
<style>
body {
text-align: center;
}
h1~p {
color: blue;
font-size: 25px;
font-weight: bold;
text-align: center;
}
div {
font-size: 32px;
}
</style>
</head>
<body>
<h1>General sibling selector (~) property</h1>
<p>It is the first paragraph element which will get effected.</p>
<div> It is the div element
<p> It is the paragraph under the div element </p>
</div>
<p>It is the paragraph element after the div</p>
<p>It is the paragraph element which will also get affected</p>
</body>
</html>
Output:
Adjacent Sibling Combinator (+):
- Adjacent Sibling Combinator (+): The adjacent sibling combinator selects an element that is immediately preceded by a specified element.
Syntax:
element + element {
/*style properties*/
}
Example:
<!DOCTYPE html>
<html>
<head>
<title> Adjacent Sibling Selector </title>
<style>
body {
text-align: center;
}
p+p {
color: Blue;
font-size: 25px;
font-weight: bold;
text-align: center;
}
p {
font-size: 32px;
}
</style>
</head>
<body>
<h1> Adjacent sibling selector (+) property</h1>
<p> It is the first paragraph </p>
<p> It is the second paragraph which is immediately next to the first paragraph, and it get selected. </p>
<div> This is the div element </div>
<p> This is the third paragraph which does not get affected </p>
<p> This paragraph is also selected because it immediately next to third paragraph </p>
</body>
</html>
Output:
Child Combinator (>):
- The child combinator selects all elements that are direct children of a specified element.
Syntax:
div > p {
/*style properties*/
}
Example:
<!DOCTYPE html>
<html>
<head>
<title> Child Selector </title>
<style>
body {
text-align: center;
}
div>p {
color: Blue;
font-size: 25px;
font-weight: bold;
text-align: center;
}
p {
font-size: 20px;
}
</style>
</head>
<body>
<h1> Child selector (>) property</h1>
<p> It is the first paragraph </p>
<p> It is the second paragraph </p>
<div>
<h1>This is the div element</h1>
<p> This is the 3rd paragraph which is the child of div</p>
<p> This is the 4th paragraph and this get selected because of child of div </p>
</div>
</body>
</html>
Output: