The ID selector doesn't overwrite the type selector in the review section. Why?

Hello! This is my first time posting here, so please let me know if there’s something wrong with this post.

In the review page of the Box Model lesson, I’ve tried changing the code a little bit, and realized that I could set the text align property of the p elements to justify, and the page would render, even though the same property was set to center in #main, which designates the div that contains the p elements in the HTML document:

<!--HTML-->

 <div id="main" class="content">
    <p>Text.</p>
    <div class="pull-quote">
       <h2>Text</h2>
    </div>
    <p>Text.</p>  
</div>
<!--CSS-->

#main {
  margin: 0 auto;
  padding: 40px;
  text-align: center;
  width: 400px;
}

p {
  color: grey;
  font-size: 16px;
  line-height: 48px;
  margin-top: 40px;
  padding: 10px 20px;
  text-align: justify;
}

 .pull-quote {
  margin: 0 auto;
  width: 400px;
}

I’m a bit confused as to why that happens. Since the p elements are inside the #main div, shouldn’t the declarations overlap, and the more specific one win?

I understand that the p elements are boxes inside a bigger box, and because of that they can have their on padding, borders and margins. But if the same goes to their content, why is it that, if I don’t specify the text align property of the p elements, it will be the same as the #main one? What exactly does the text align property align in the #main div, if there’s nothing on it but elements that have their own content, ruled by their own declarations?

On a related note, why do we need a “pull quote” div, if it’s style declaration sets the same parameters already set by it’s parent element #main? I’ve tried deleting the .pull-quote declaration and didn’t notice any changes…

Sorry if my explanation is too confusing, but I’m having a really hard time wrapping my head around this.

Yes, the a specific ruleset should win - so an #id ruleset should beat a .class ruleset which in turn should beat a tag ruleset… however a directly targeted ruleset will win over an inherited one.

As the <p> is a child element of the <div id="#main">, it inherits the text-align property. You then have a separate ruleset which directly targets <p>, so this wins over the rule inherited from the parent.

If you don’t specify otherwise, it’s likely that the <p> elements are inheriting the text-align from their parent <div>.

1 Like

Thanks, that was clarifying.

1 Like