A common class for multiple html tags using css

Question

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.

fwiw, I wouldn't really worry about the size of your CSS as motivation for doing this - CSS is a relatively light part of any payload anyway and very cacheable. — annakata
– annakata, Commented Nov 12, 2010 at 15:22
hmm...I am just trying to see the limits I can reduce my webpage's size, so trying to implement most new features (html5, css3) and reduce use of images, javascripts. — crodjer
– crodjer, Commented Nov 12, 2010 at 15:24

annakata · Accepted Answer · 2010-11-12 15:21:00Z

1

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.

answered Nov 12, 2010 at 15:21

annakata

76.1k18 gold badges116 silver badges181 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:25:09Z

1

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

Can a CSS class inherit one or more other classes?

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Nov 12, 2010 at 15:18

Evan Mulawski

55.5k16 gold badges122 silver badges147 bronze badges

2 Comments

casablanca Over a year ago

LESS still compiles to normal CSS, but the OP said he wanted to reduce the size of his CSS.

Evan Mulawski Over a year ago

The change in size is negligible. The only other way would be to define the three tags as the OP said, which would increase the size of the CSS anyway.

casablanca · Accepted Answer · 2010-11-12 15:19:10Z

1

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.

answered Nov 12, 2010 at 15:19

casablanca

70.9k8 gold badges139 silver badges155 bronze badges

Comments

Pekka · Accepted Answer · 2010-11-12 15:18:16Z

0

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?

answered Nov 12, 2010 at 15:18

Pekka

451k150 gold badges990 silver badges1.1k bronze badges

Collectives™ on Stack Overflow

A common class for multiple html tags using css

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related