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 dolor...</p>
    <a href="#" class="button">Tenticals</a>
  </div>
  <div>
    <figure>
      <img src="images/crab-icon.png" alt="Crab">
    </figure>
    <h2>The Crab</h2>
    <p>Lorem ipsum dolor...</p>
    <a href="#" class="button">Crabby</a>
  </div>
  <div>
    <figure>
      <img src="images/whale-icon.png" alt="Whale">
    </figure>
    <h2>The Whale</h2>
    <p>Lorem ipsum dolor...</p>
    <a href="#" class="button">Stuart</a>
  </div>
</section>

Save this and you will see the <h2> tags lose their blue bold color because in the CSS, we were still targeting the .column-title class that no longer exists:

So now what I'll do is go into the CSS, find the .column-title class, update that:

.secondary-section h2 {
  font-style: normal;
  color: #eb2428;
  margin-bottom: 10px;
}

This is our descendant selector. If we save and refresh, we see that it changes those <h2> tags back to the blue, bold, and non-italic font-style that we want:

So this .secondary-section selector shown in the following CSS is a descendant selector. It's targeting all the h2's that are inside of secondary-section:

.secondary-section h2 { 
  font-style: normal; 
  color: #0072ae; 
  font-weight: bold; 
} 

If we take a peek back at the HTML, you will see the h2 is indeed inside of secondary-section:

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

Now we can take this a step further. Go into the CSS and underneath our existing .secondary-section h2 rule set, type .secondary-section p. This is going to target our paragraph inside of the secondary-section. So add a color of deep pink, save and refresh, and you'll see that now all our paragraphs are pink:

.secondary-section p { 
  color: deeppink; 
} 

Here's what that looks like:

We can also do this with our image tag. If you look back at the HTML, our image tag is inside of a div tag that's inside of a figure tag:

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

Switching back to our CSS, we can type the selector .secondary-section div figure img and then we add a border of 10px, solid, in this gray color:

.secondary-section div figure img { 
  border: 10px solid #333; 
} 

Following is the output of preceding code:

While we can see that works and we have got a gray border round our images on the site, we're being a little more specific than we need to be with our selector. We could just get away with typing img without div and figure and the borders would still be there:

.secondary-section img { 
   border: 10px solid #333; 
} 

There's another problem with using a really long selector like this. The following selector carries more weight and could overrule other styles that you may not want it to:

.secondary-section div figure img { 
   border: 10px solid #333; 
} 

This is against keeping your code lightweight. Specificity is something I really want to stress; don't overdo it with really long selectors. In fact, as a rule of thumb, try not to go more than three levels deep; there are exceptions to this rule, of course, but try to keep it in mind as you write your CSS. The reason for this is there's an exact science to calculating the weight of your CSS selector, which I'll get into in a later section. I want to at least introduce it now so that we can start getting familiar with it.