Question

I’m trying to tie a css rule between my body and a subsequent div element. Using wordpress, my body element has classes defined to itself based on what page is loaded. I’m trying to implement a styling that will essentially check if the classe author- is present (body.author-<*>), then find the div having the same class name and implement a specific styling.

I can’t use any interal wordpress function as the list containing the said div (list of authors) is dynamically set in my code.

Aswell, I was hoping to avoid using javascript as I’d like to limit the scope of this change to CSS if possible.

Also, as there’s many users listed in my list, specifying a static css rule for each user, such as body.author-user1 div.author-user1{}... would be annoying to maintain as new authors could be added later and I’d want to limit any future code change to purely html.

Is this possible with only css?

Answer 1

You could use an advanced css selector

body[class^="author"] {  }

To find all the bodys whose classes start with author and then do the same for the div

body[class^="author"] div[class^="author"] {  }

however I dont know about ie compatibility for anything lower than ie8.