Let’s continue with the CSS Basics. If you haven’t read the previous article, make sure to read it first.

Nested Styling

CSS allows for nested HTML element styling. In the example below, we have two paragraph tags. Each paragraph has a link and a button.

<p id="first-p">
    <a href="#">Link 1</a>
    <button>Click Me</button>
</p>
<p id="second-p">
    <a href="#">Link 2</a>
    <button>No, Click Me</button>
</p>

Since neither the link, nor the button, has neither an id nor a class attribute, we must specify their styles through nesting. To select the link contained inside the first paragraph, we would write the following CSS code:

#first-p a { font-weight: bold; }

We style the <a> tag inside the #first-p paragraph. To add a style to both buttons inside the paragraph tags only and exclude the buttons outside of the paragraph tags, the following CSS code can be written:

p button { background-color: coral; }

The styles were applied, and the results below were produced.

Styling can be applied to child elements, but not to descendants by using the greater than symbol >. In this example, we’ll have a <section> parent, one <button> child, one <p> child, and one <button> descendant.

<section>
    <button>Child Button</button>
    
    <p>
        <button>Descendant Button</button>
    </p>
</section>
/* CSS */
section > button { background-color: skyblue; }

Styling Multiple Elements

CSS has a lot of flexibility on how you specify the selectors and apply the styles to them. To add a style to multiple HTML elements, we’ll separate each element with a comma. For example, if we wanted to change the color of the <h1>, <h2>, and <h3> tags, we could write the following code:

h1, h2, h3 {
    color: royalblue;
}

You can mix and match the multiple selectors with tag names, class names, nested selectors, and ids.

<section>
    <button class="first-button">Child Button 1</button>
    <button id="second-button">Child Button 2</button>
    <a href="#">Child Link</a>
    <p>
        <button>Descendant Button</button>
    </p>
    <div>
        <a href="#">Descendant Link</a>
    </div>
</section>
/* CSS */
p, div, section > a { padding: 10px; }
.first-button, #second-button, div > a {
    background-color: skyblue;
    padding: 5px;
}

The first style adds a 10px padding to any paragraph element, any div element, and any child link of the section element. The second style adds a sky blue background color and a 5px padding to the first-button class, the second-button id, and any child link of the div tag. The third style adds a 10px top margin to any child button of the paragraph tag and any child link of the section tag.