Lately I had a bit of an design issue with a web front end based on classical php/html/css. I wanted to display images in different sizes on different pages. But I wasn´t able to touch the php / html source so my only chance was to work on the css. But – I also wasn´t able to touch the css (pseudo) classes or introduce new ones.
After quite some time of research I discovered, that CSS offers a great way to nest statements so here is what I´ve done.
The original CSS class looked like this:
.td_value_details {
vertical-align: top;
}
And here is how I nested my image size statement in it:
.td_value_details img {max-width: 600px; height: 350px;} {
vertical-align: top;
}
I really didn´t know that this was possible and I´m pretty sure it´s not best practice, but it really does the job.