Resolved CSS: Target element by style

[CaptainB]

Hi guys,

I have a pretty complex question that I would like to ask you.
With CSS3, new attribute selectors have been introduced which is very handy. The reference does, however, only explain targeting elements by some attributes that have to be present on the html-tag that should be target.

What I would like to do is to target an element that has a specific style. For example, IE7 does not support the CSS

inline-block

-attribute without adding a fix to it. Instead of listing all the instances that use inline-block and target the fix to them, I would like to do it automaticly by targeting all instances that have the inline-block attribute. In that way, whenever I introduce a new element with an inline-block attribute it would apply the fix automaticly without me having to enter the CSS and add the class name to the css fix.

Examples:

The traditional way would be to add the attribute to each class that should have the fix applied:

.class1, .class2, .class3, ... {
    *display: inline;
    *zoom: 1;
}

Instead of doing the above, I would like to use a selector to take care of the assigning:

*[style='inline-block'] {
    *display: inline;
    *zoom: 1;
}

Is this possible? How would I go about it? I have not been able to find any help on google - only topics where elements are targeted by their attributes.

[VIPStephan]

It’s not possible with regular CSS. CSS is addressing elements by their physical attributes (in the HTML), not the styles applied to them. You could look into preprocessors like SASS or LESS (although I have no idea if they have such features because I’m not using them) but it will always just convert it back into regular CSS anyway. For everything else you would need JavaScript to check for the current style applied and do something with those elements.

[CaptainB]

I suspected that was the case.
Thank you for clarifying, VIPStephan!

I might look into SASS/LESS and Googles alternative, which also seems pretty neat. As a bonus I found out that CSS3 actually have some of the cabilities of the more advanced SASS/LESS, e.g. calculating, which is also pretty neat.

Have a very nice day and thank you for always sticking around!