CSS Parent Selector Conundrum

While working on a website for a client just a couple weeks back I found an issue where I wanted to make it easier for the client to add and edit images in a particular module with particular attributes to have particular formatting / styling from CSS applied to it. While the first thought was keep it simple I soon came to the realisation that the issue is a lot more complex than first thought.

A great example of what I am talking about is as follows:

You have a module position / widget within your website. Lets say for example you want to have a background image behind each link but you do not want it to apply when the link itself is an image.

While this may not actually happen all that often and most developers / designs will work around it by adding a class or id tag to the specific link in question I wanted to make it so that the end user could forget about adding a class or id tag. This I figured should be fairly straight forward and something that I was sure had been done before. Especially given the recent release of CSS3 and more browsers supporting it I figured "surely it has happened to millions of others that they will have a solution...." well was I wrong!

After doing a fair whack of research it works out that it is a massive issue which has been getting a lot of discussion around the various development forums around the world. The issue is becoming so common that there is a possibility of a parent selector being introduced in to CSS4. While this would save alot of headaches it still is something that has not been introduced to date and with the various discussions around the place are being had it appears not any 2 people can agree on how the syntax should be handled and further to that the other key question that has not been answered is whether ALL web browsers will natively support the full release of CSS4.

For the time being the only solution that has been offered in relation to this issue is a jquery script which will detect the combination of tags and then apply a class as required to the respective <a> tag.