Descendant selectors

Document Object Model

The Document Object Model (DOM) represents the relationship between HTML elements.

Parent

Child

Siblings

Decendant

section p { ... }

<section>
    <p> ... </p>
</section>
<p> ... </p>
<p> ... </p>
<p> ... </p>

section p a { ... }

<section>
    <p> there is a <a href ="#">link</a></p>
</section>
<p> ... </p>
<p> ... </p>
<p> ... </p>

The more selectors we use better control over styles we get. we can skip the elements when selecting.

stick to the two or three level selections.

Previous
Next