CODEWITHSUNDEEP
htmlcss
crodjer
crodjer

Reputation: 13634

A common class for multiple html tags using css

I have a specific css class "styled" which gives glass effect to the various divisions. The site is at http://www.rohanjain.in/. I have various html5 tags which use the glass effect from the css class defined. Is there any way to define in the .css so that my header, footer, article tags use the class "glass" automatically, i.e. they inherit from this class. I am trying to do to decrease the size of css and html. Right now these tags are provided attribute class="stlyed" from html. But is there any way to do this only using css.
I really don't want to do something like this: 

article, footer, header{
    ...css definations... 
}

I want to use browser detection and define class glass in some other .css according to the features supported while keeping the size minimal.

Update 1: This is the source of css http://www.rohanjain.in/media/css/style.src.css. The size of styled class is high because of multibrowser effect definations.

Update 2: It seems there is no simple way to achieve inheritance of classes, so I am finally using class="stlyed" in the html elements to achive this.

Upvotes: 1

Views: 1995

Answers (4)

annakata
annakata

Reputation: 75872

Think about this from a CSS perspective. How is your CSS meant to know that you have some tags which are in some way special if you're not prepared to tell the CSS about them explicitly and you're not going to classify your markup implicitly?

The best solution I believe is to classify your markup (but not using something as unsemantic as "glass") but the explicit element based CSS is perfectly acceptable.

Upvotes: 1

casablanca
casablanca

Reputation: 70731

No, you either have to define them together:

article, footer, header, .glass {
    ...
}

so that those tags have the same styles as the "glass" class, or you have to use JavaScript to dynamically add the "glass" class to those elements.

Upvotes: 1

Evan Mulawski
Evan Mulawski

Reputation: 55354

There is a tool called LESS that will do exactly that:

Can a CSS class inherit one or more other classes?

Upvotes: 1

Pekka
Pekka

Reputation: 449783

If I understand you correctly, the way that you show

article, footer, header{
    ...css definations... 
}

really is the only, and most correct, way to do this. I don't understand why you don't want to use it, or what other kind of definition you are looking for?

Upvotes: 0

Related Questions