Creating descendant selectors

In the previous section, Renaming elements – classes and IDs, we added a class to all <h2>'s because we knew that <h2> tags in the secondary-section of our HTML were different than all other <h2> tags. So we probably will want to target other elements in this area to be different as well. Here's how we can do that best. Instead of putting the class on the <h2> tag, let's put it on the section tag and use descendant selectors from there. Let's get rid of class="column-title" in all the <h2> tags. On the section element, let's add a new class, namely secondary-section:

<section class="secondary-section">  <div>    <figure>      <img src="images/octopus-icon.png" alt="Octopus">    </figure>    <h2>The Octopus</h2> <p>Lorem ipsum ...

Get Mastering CSS now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.