CSS3 Selectors: The descendant selector

This entry is part 8 of 40 in the series CSS3 Selectors

Here we use article p as an example as shown below.

This is a descendant combinator.

We use article p making <p> the descendant of <article> element.

<!DOCTYPE html>
<head lang='en'>
    <meta charset='UTF-8'>
        article p {
            font-family: sans-serif;
            color: blue;
            font-size: 125%;
    <h1>American Music</h1>

    <p>The different types of genre in American music.</p><!-- Child combinator targets this paragraph -->

        <p>Taylor Swift</p><!-- Adjacent sibling combinator targets this paragraph -->
        <p>Carrie Underwood</p>
    <p>Hard rock and metal</p><!-- Child combinator targets this paragraph -->

Try the CSS and you can see that all the <p> elements are affected.

Series Navigation<< CSS3 Selectors: The > selector
CSS3 Selectors: The + selector >>