Shorthand for referencing multiple CSS Specifiers

[ETpro]

This CSS works, and drills down to the image I want to style.


#itemtype .itemform .price-bold img, #itemtype .itemform .price img,
#itemtype .itemform .sale-price-bold img, #itemtype .itemform .sale-price img,
#contents .price-bold img, #contents .price img, #contents .sale-price img {
vertical-align: middle;
margin-left: 10px;
}

Back End SCRIPTING tests whether items are on sale or not, and whether the store owner wants pricing displayed in bold or not, and uses a series of conditionals to decide which class; price, price-bold or sale-price, to assign to a given price display.

Of course, I could just assign a class to the image itself, but I'm looking at this as a learning opportunity. I have to style lots of HTML that is generated by CGI scripts I do not have access too. And so I often have to use long-chain specifiers to single out a particular HTML element I want to style when there are dozens of such elements here and there on a page. Long-chains of specifiers work to do that. So I'd like to know if there is a simple way I could have shortened the above and still styled all those IMG tags without touching any others.

[traq]

in general, if you *have* to do it that way (e.g., cannot change the markup / add classes to the particular images), then go ahead... but there's no way to make it simpler or shorter.

another problem with high specificity is that you create rules that are fragile (a minor change can cause them not to apply anymore) and/or uncontrollable (unexpected markup causes them to apply to elements they shouldn't). It also creates an absolute _nightmare_ of code for any future webmasters.

avoid it if at all possible.