Let's say you want to center the text here:

<div class="wrapper">
    <div class="content">
        <p class="body">

It doesn't make a difference whether you put text-align: center; on wrapper, content, or body. Which element of the nesting tree should you apply CSS to in such cases? Is it a good practice to style the innermost element?

closed as primarily opinion-based by amon, Doc Brown, gnat, Greg Burghardt, Jörg W Mittag Aug 14 '18 at 13:15

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise. If this question can be reworded to fit the rules in the help center, please edit the question.

  • 3
    Thought experiment: Let's say you decide to add another paragraph later in the "content" div. Will it be easier to add another style reference to accommodate the new paragraph, or just let it pick up the outer style automatically? Which behavior is most desirable in your specific application? – Robert Harvey Aug 13 '18 at 3:46

There is no single answer to this. Depends what your style is, whether it is inheritable, how the document structure might change in the future, etc.

@robert-harvey ' comment makes sense (though your style can easily say 'all body paragraphs in div.content, i.e a selector like div.content p.body {rules}, so it applies to anything you add in later)

Apply the style to whatever it logically belongs - e.g., if it is a background color for the entire division, that is, don't apply it to 'all paragraphs in the division', apply it to the div itself. On the other hand, if it is meant to highlight paragraphs of class body (but not other paragraphs nor the blank space between those), then apply it only to p.body.

Not the answer you're looking for? Browse other questions tagged or ask your own question.