In CSS3 combinators are the relation between more than
one selector.As we have learn in previous chapter that css selectors
are used to target the element for styling.
There are following four types of combinators are explained below.
1) Descendant selector (space)
2) Child selector (>)
3) Adjacent Sibling selector (+)
4) General Sibling selector (~)
Descendant selector (space)
A descendant selector is used to target elements that are descendant with other element.It means the element which is in relation to another element.
<style type="text/css">
div p{
background-color: orange;
padding: 5px;
}
</style>
<div>
<p>
This is a paragraph.
</p>
</div>
Output of above code
This is a paragraph
Child selector (>)
A child selector is simply target the child elements of specified element.They are indicated with the greater-than symbol (>).An example of child selector is given below.
<style type="text/css">
p > b {
background-color: orange;
}
p {
background-color: lightgrey;
border: 1px solid black;
}
</style>
<p>
This is a paragraph.<b>This is child</b>.This is a paragraph.
This is a paragraph.
</p>
Output of above code
This is a paragraph.This is child.This is a paragraph. This is a paragraph.
Adjacent Sibling selector (+)
An adjacent sibling selector is used to target the element which is directly after anther element while having same parents.It is indicated with a plus (+) sign. An example of adjacent sibling selector is given below.
<style type="text/css">
i + u {
color: red;
}
p {
background-color: lightgrey;
border: 1px solid black;
}
</style>
<p>
This is a paragraph.<i>This is child</i>.This is a paragraph.
<u>Underlined tex</u>.
</p>
Output of above code
This is a paragraph.This is child. This is a paragraph.Underlined tex.
General Sibling selector (~)
A general sibling selector is used to target all the siblings. This type of selector is new in CSS3 and is not supported by Internet Explorer 8 and earlier. An example of general sibling selector is given below.
<style type="text/css">
i ~ u {
color: red;
}
p {
background-color: lightgrey;
border: 1px solid black;
}
</style>
<p>
This is a paragraph.<i>This is child</i>.This is a paragraph.
<u>Underlined tex</u>.This is paragraph.<u>Underlined tex</u>.
</p>
Output of above code
This is a paragraph.This is child. This is a paragraph.Underlined tex. This is a paragraph.Underlined text.
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
