Page Stats
Visitor: 349
CSS3 Combinators
A Combinators explains the relationship between the selectors. There are four different combinators in CSS3:
- Descendant Selector
- Child Selector
- General Sibling selector
- Adjacent Sibling selector
1. Descendant Selector - The descendant selector matches all elements that are descendants of a specified element. If you want a given style to be applied on element with in another element than Contextual Selector or Descendant Selector is used. For example, whenever the <p> tag occur inside a <div> tags, the background color changes to yellow
Example 1: Descendant Selector
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
2. Child Selector - The child selector selects all elements that are the immediate children of a specified element.
div > p {
background-color: yellow;
}
3. General Sibling selector - The general sibling selector selects all elements that are not in a specified element.
Example 3: General Sibling selector
div ~ p {
background-color: yellow;
}
4. Adjacent Sibling selector - The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. "Adjacent" means "immediately following".
Example 4: Adjacent Sibling selector
div + p {
background-color: yellow;
}