Child Selector

direct child between the div

direct child

no direct child

Paragraph 4 in the div.

not even a child

Descendant Selector

all p betwen div.

direct child and decendent

only decendent

only decendent

Not Descendant/ child

Adjacent Sibling Selector
The + selector is used to select an element that is directly after another specific element.
Paragraph 1 in the div.
Paragraph 2 in the div.
Paragraph 4. After a div.
Paragraph 5 in the div.
Paragraph 7. After a div.
Paragraph 8. After a div.
The general sibling selector (~) selects all elements that are next siblings of a specified element.
Paragraph 1.
Paragraph 2.
Paragraph 3.
Some code.
Paragraph 4.
Exported from Notepad++
<html><head> <style> body{ background-color:pink;} div > h4 { background-color: yellow; } div p { background-color: silver; } div + h6 { background-color: aqua; } div ~ h5 { background-color: gold; } </style></head> <body> <h2><u>Child Selector</u></h2> <h4>direct child between the div </h4> <div> <h4>direct child</h4> <section> <!-- not Child but Descendant --> <h4>no direct child</h4> </section> <h4>Paragraph 4 in the div.</h4> </div> <h4>not even a child</h4> <h2><u>Descendant Selector</u></h2> <p>all p betwen div.</p> <div> <p>direct child and decendent </p> <section><p>only decendent</p></section> <span><p>only decendent</p></span> </div> <p>Not Descendant/ child</p> <h6><u>Adjacent Sibling Selector</u></h6> <h6>The + selector is used to select an element that is directly after another specific element.</h6> <div> <h6>Paragraph 1 in the div.</h6> <h6>Paragraph 2 in the div.</h6> </div> <h6>Paragraph 4. After a div.</h6> <div> <h6>Paragraph 5 in the div.</h6> </div> <h6>Paragraph 7. After a div.</h6> <h6>Paragraph 8. After a div.</h6> <h5><u>The general sibling selector (~) selects all elements that are next siblings of a specified element.</u></h5> <h5>Paragraph 1.</h5> <div> <h5>Paragraph 2.</h5> </div> <h5>Paragraph 3.</h5> <code>Some code.</code> <h5>Paragraph 4.</h5> </body> </html>