/* Scroll for HTML part for visualization
There are four different combinators in CSS:
Descendant Selector - selects all of specified parent */
ul li{
background-color: orange;
}
/* Child Selector - selects only children */
ul > li{
background-color: red;
}
/* Adjacent Sibling Selector - selects only the immediate sibling*/
ul + li{
color: blue;
}
/* General Sibling Selector - selects all the siblingss */
ul ~ li{
background: yellow;
}
/* Next is the HTML part for the CSS
<body>
<h2>Combinators CSS</h2>
<ul>
<li>Child1</li>
<ol>
<li>Descendant1</li>
<li>Descendant2</li>
</ol>
<li>Child2</li>
<li>Child3</li>
<li>Child4</li>
</ul>
<li>Sibling1</li>
<li>Sibling2</li>
</body>
*/