How should I handle this CSS Inheritance conundrum?


Tags: javascript,css

Problem :

I have a class of images called glyphs that appear through out my site. Once upon a time they were all called just called glyph. They used to only appear in one box. That box was a specific size and I used a javascript method to make sure the text always fit and the glyphs were always about the same height as the rest of the text. This was easy to do and the glyphs started off with a default due to my style sheet.

Now, I've decided to include multiple boxes per page with variable amounts of text. Each box gets sized independently. I've tried delaying the sizing routine, but this is highly reliant on a user's connection speed. If I don't run the sizing routine then things don't look right at all, so I'd at least like to pick a default starting size for everything. Of course, you can't size stuff with javascript until it has been loaded. Snake eats tail.

So basically, now that I have more than one box, each glyph gets a class glyph:1, glyph:2, etc. This number can go as large as the number of user submitted items on my site. How does CSS handle this? These items basically need two class names as far as I can see. But I'm pretty sure that's not allowed.

What I need: Set all images classes that begin with "glyph:" to 1em

This doesn't exist, right? glyph:*

Also, : is probably bad to use in a css class name, huh?



Solution :

Don't use the : symbol. you can have more than one class for an element so do it like so

<div class="glyph glyph-1">Foo</div>
<div class="glyph glyph-2">Foo</div>
<div class="glyph glyph-3">Foo</div>
<div class="glyph glyph-4">Foo</div>

    CSS Howto..

    How to install Firefox “Stylish” css file? [closed]

    IE7: CSS & jQuery: dragging up, dragged item is on top, dragging down: dragged item is below. How do I get both to be on top?

    How to style Repeater item background color ontap?

    How to expand sidebars sub-menu to the correct size?

    how to add more specificity to css class .background-color-blue so it overrides default div's background color

    Changing opacity for div in div - is this possible? How?

    How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files

    how to target individual elements in grails g:render

    How to call particular CSS file only for desktop not for mobile [closed]

    how to set border in firefox

    How to DRY up on SASS transitions with multiple elements?

    How to float all child divs to center inside a parent div?

    Problems with properly simulate a border to a “ribbon” with css. How do I correct it?

    How to edit rails app in production env, specifically CSS

    How to build a special polygon (a kite shape) with HTML & CSS only?

    How to create a header that changes as you scroll down the page? [duplicate]

    How to position a CSS triangle using ::after?

    How do I know which CSS is overriding my background image?

    How to write css code in javascript? (Uncaught TypeError: Cannot set property “height” of undefined)

    How do I create a cut-out hexagon shape?

    How to style a completely different element when hovering over another element(with different parents)? [duplicate]

    How to remove inherited styles using jQuery?

    Parsing erb within erb in a view. How to add CSS class?

    How to make text box to overlap with the image?

    How to center an input field in HTML / CSS / Bootstrap

    How to completely show hide tabs on onclick event in HTML CSS Javascript

    How to change CSS of a website depending on whether it is being viewed on mobile or computer? [closed]

    How to change expand div after click and collapse it after another click?

    How to create a
      with a triangle for the :active row?

    How can I change my div box to a link?