Define Styles For Nested Tags in CSS3

We can set up style rules for our page based on how tags are nested inside another tag(Define Styles For Nested Tags). For example, we can specify that a style rule is applied to the heading tag, but only when that heading is nested inside a certain type of section tag. We create such a style rule by specifying a sequence of tags or tag classes in the selector. The nested order of tags on your page must match the sequence of the tags in the selector for the style to be applied. Defining style rules this way enables you to efficiently apply a style to precise sections of your page.

Table of Contents

Define Styles For Nested Tags

Define the style

Step 1: Type the name of the outer tag or tag class.
Step 2: Type a space
Step 3: Type the name of the inner tag or tag classer.
Step 4: Type{.
Step 5: Type the property value pairs for the style separating multiple pairs with semicolons.
Step 6: }.

Apply the style

Type the outer tag. Add a class attribute if one was defined in the style.

Step 2: Within the outer tag. add a class attribute if one was defined.
Step 3: Type the content
Step 4: Type a closing inner tag.
Step 5: Type a closing user tag.
Step 6: We can add other page content.

Result Output

<!DOCTYPE html>
<html>
    <Head>
        <Title>Coding thai</Title>
        <style>
            Section.First h2{
                color: red;
                font-family: arial;
                font-style: italic;
            }
        </style>
    </Head>
    <body>
        <h1>Types of Web Developer</h1> 
        <hr>
        <Section class="First">
        <h2>Fontend Developer</h2>
        <p>A front end developer has one general responsibility: to ensure that
          website visitors can easily interact with the page. </p>
        </Section>
        <Section class="Second">
        <h2>Back-end Developer</h2>
        <p>Back-end developers are the experts who build and maintain the mechanisms
          that process data and perform actions on websites.</p>
        </Section>
        <hr>
       <small> &copy;Copyright 2022 Codingthai</small>
    </body>
</html>

What is the terminology to describe the nested relationship of tags on a page?

We can use family tree terminology. The outer tags are known as ancestors and the inner tags are known as descendants. In the example above the <h1> tag must be a descendant of the <section> tag for the style to be applied.

Tags directly next to each other in the hierarchy can be given more specific classifications. The outer tag is a parent and the next tag immediately on the inside is a child.

How do I specify a parent-child relationship in my CSS rule?

We can specify that a style rule is applied only to the immediate descendant or child of a tag using a greater than symbol(>) in the selector. The following applies a rule for a <p> tag that is directly inside of a < article> tag:

Article >p { font-size: 16pz; color:green}

This rule would apply to the following:

<article><p>Hello, HTML5!</p></article>

The rule would not apply to the following:

<Article><section><p>Hello, HTML5!</p> </sectin></article>

Follow us on Social Media For More

Facebook, Instagram, Pinterest