CSS inheritance the right way [closed]

Question

Closed. This question needs debugging details. It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.

Closed 11 years ago.

Improve this question

I am trying to follow this link to get inheritance in CSS to work. It is the accepted answer so I assume it works that way. I don't want to have a div layer use multiple classes(Unless that is the correct way) like this to get the job done.

 <div class="bannerMain ShadowBanner" >
        This div is with class bannerMain that also has shadowBanner properties
 </div>

What is wrong with what I am doing here? The div that uses banner main should have been on the top and the one that uses shadow main should have been at the bottom since I am using bottom: 50px; there. Also only the div with class ShadowBanner should have had a shadow because its defined in the ShadowBanner class.

Edit

What I want to do is have one Css class that has the basic look and feel that would apply to all div layers on the page. In this case bannerMain is such a class which I have applied to the div with id=main. Then for each other layer I would like to have what is contained in the Css class 'bannerMain', plus whatever else is defined for it in its own specific class. In the example above I have applied the Css shadowBanner to the div with id=withShadow

The end result would be the "main" div showing without a shadow and no background color and the "withShadow" div shown as having a black background and having a shadow and the remaining properties assigned to it in the shadowBanner Css class along with inheriting display: block; and text-align:center; from the parent Css class "main"

I am trying to figure out inheritance in Css and trying to see if there are any parallels with inheritance as observed in the regular Java or C# world

down-voters please explain the reason for down-voting or marking as close. — user20358
– user20358, Commented Nov 11, 2014 at 16:10
Hey could you explain this problem a little more? what exactly do you want each div to be doing? — Brandon Knight
– Brandon Knight, Commented Nov 11, 2014 at 16:11
Hi Brandon, sorry about not being very clear before.I have updated my question — user20358
– user20358, Commented Nov 12, 2014 at 3:42
This question was minimal, had a complete description of the problem and a working verifiable example of what was not working in the jsfiddle attached which was corrected immediately after the first downvote made me realise I put the wrong link. Enough to get two people to understand and answer correctly. Please dont mark a question to be closed without giving reason as what was wrong with it. It is just as off topic as saying "It doesn't work" in the problem statement and doesn't help make future posts any better. — user20358
– user20358, Commented Nov 21, 2014 at 4:09

Brandon Knight · Accepted Answer · 2014-11-12 13:15:26Z

1

Okay I think I understand what you want now. Please read michiganfootball20's answer as well. You must be aware when you do

.bannerMain, .shadowBanner{styles here}

that both bannerMain AND shadowBanner will use those properties. So you say you want SOME shared properties between bannerMain and shadowBanner. You will put those in there. If you want styles specific to shadowbanner, say the shadow and the background, you will put them ONLY in the shadowBanner class.

Don't think of it as inheritance, just think of it as shared properties. I think this is where you are getting confused because I think you are trying to make it too complicated when it doesn't need to be.

Please look at this fiddle and let me know if you have any other questions.

I have updated your fiddle for you to look at if you click this line.

answered Nov 12, 2014 at 13:15

Brandon Knight

5321 gold badge4 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JackB · Accepted Answer · 2014-11-11 16:18:37Z

1

When you write a piece of CSS like:

.bannerMain, .bannerNotification {/*some style*/}

You are telling the browser that both .bannerMain and .bannerNotification are to utilize the CSS in the following statement. Therefore, you should only include style elements that are supposed to be shared by by those two elements. You need to create seperate css sections to specify style unique to a particular element. You want to do something like this:

CSS

.bannerMain, .bannerNotification {/*shared style elements*/}

.bannerMain {/*bannerMain unique style elements*/}
.bannerNotification{/*bannerNotificationunique style elements*/}

P.s, its kind of unclear what the intention is in your jsFiddle. Would be happy to provide additional help.

answered Nov 11, 2014 at 16:18

JackB

7351 gold badge5 silver badges13 bronze badges

2 Comments

Brandon Knight Over a year ago

Yea the question is pretty confusing. I'm not sure what styles he wants applied to which divs. I think he may be misunderstanding Inheritance, based on him linking the other stackoverflow answer.

user20358 Over a year ago

Hi Guys, sorry about not being clear before. I have updated my question with what exactly I am trying to achieve. I realize I forgot to Update my jsfiddle link after making the changes to it.

Collectives™ on Stack Overflow

CSS inheritance the right way [closed]

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related