0

I am new and would just like some understanding of the parent > child element and the preferred syntax for CSS.

Can someone explain to me why when I remove the > tag the code works for h1 in container-2, but if I leave it there the font size rule doesn't apply and instead follows the font-size rule for container-1?

.container-1 > h1 { 
    font-size: 1em; 
}

.container-2 h1 { 
    font-size: 0.8em; 
}

I am abit confused as the container-2 parent element is not the same as that of container 1, but it still applies. This is the html code for reference.

      <div class="container-1">
                <div class="content-1">
                    <!--image-->
                    <img src="images/edge of tomorrow.jpg" alt="Edge of Tomorrow" href="featured.html" class="featured-banner">
                </div>
                <!--headings-->
                <div class="content-2">
                    <h1>Edge of Tomorrow</h1>
                    <h2>Rating: 4/5</h2>
                    <p>It leaves you on the edge, wishing for a tomorrow. An epic action movie with twists and turns along the way.</p>
                    <button class="featured-button"><a href="featured.html">Read more &#8594;</a></button>
                </div>
            </div>
        </section>

        <section class="movies">
            <!--movies for screening, 2 columns by 2 rows-->
            <!--First Row-->
            <div class="container-2">
                <!--movie1-->
                <div class="col-1-3">
                    <!--movie 1 image-->
                    <img src="images/500 days of summer.jpg" alt="500 Days of Summer" href="movie1.html" class="movie-poster">
                    <h1>500 Days of Summer</h1>
                    <h2>Rating: 4/5</h2>
                    <h3>This is not a love story.</h3>
                </div>
</div>

Is it something to do with specificity? Is the best practice for applying font rules then to use > child element tags, or without, i.e. .container-1 > h1 vs .container-1 h1?

Thank you!

user1684750
  • 297
  • 1
  • 2
  • 7

1 Answers1

1

If you are using > then all h1 tags are selected which are direct children to container-1

.container-1 > h1 { 
    font-size: 1em; 
}

But If you are not using > then all h1 tags are selected which are children (can be inside at any level) to container-2

.container-2 h1 { 
    font-size: 0.8em; 
}

In your case h1 is not a direct child of container-1. It is a child to child(content-2) of container-1

Prithvi Raj
  • 1,611
  • 1
  • 14
  • 33
  • Thanks for your reply. Can I ask why would the h1 tag for container-2 be selected as well then cause it's not enclosed in the div class of container-1 and would then not be considered a direct child? – user1684750 Jun 20 '21 at 05:05
  • Would the best practice be to apply font rules with or without the >? – user1684750 Jun 20 '21 at 05:06
  • I have run the same code on my end, changing font size in (.container-1 > h1) is not affecting h1 in conatainer-2 – Prithvi Raj Jun 20 '21 at 05:11