Same class for different element types and inheritance

Design help General
3

Sorry for that, my CSS is a bit rusty, and I haven’t looked up any reference (shame on my lazyness…)

Actually the result I’d like to get is this:

HTML

<div class="w-container offer">
    <h2 class="offer">Nice heading</h2>
    <img src="nice_pic.jpg" class="offer" />
    <p class="offer">This is some paragraph text</p>
</div>

CSS

h2.offer {
   text-align: center;
}

img.offer {
   text-align: left;
}

p.offer {
   text-align: right;
}

My problem is that if I have a section or container with the class offer, and I add some other elements (an h2, an img and a p) inside it and I assign them the class offer respectively (because they belong to that section logically) then I get all the settings applied for them set for the offer class. Which is basically a good thing considering that it should cascade down.

But if I’d like to make the header aligned in the center and the paragraph justified, than I can’t do that without modifying every element with the same class, because the class offer affects every kind of them.

That might be a solution that I name my classes offer-container, offer-heading, offer-image, offer-paragraph, but I feel that pretty redundant, that’s what elements are for.

I think I might need to rethink my naming conventions. :slight_smile: