Apply css rules if a parent has a specific class?

HTML & CSS
1

Is it possible to say

if (any parent has class X) AND (we have class Y)
{style…}

I’m trying to style a couple of tables (containing tabular data, not layout) in a Drupal view. I need to be able to style these tables separatelyeach other and from other views which share the style sheet. I can drop a class name into a parent to allow me to pick up report specific classes and therefore apply unique styling to each report, however, I can’t seem to be able to get my head round how to pick up each table on this report.

The div’s are nested and generated dynamically as required by the views system, so I don’t necesserally have a known structure other than my class will be in one of the higher level div’s making a nth-child impossible. Unfortunately there’s no facility to drop a class or id into the table tag or the parent wrapper.

The report is destined to be a printed report, so no option to run any script to tweak the DOM.

The structure is

body
div - outer wrapper
div - view wrapper - I can drop a class name in here
div
div
table - I can’t drop a class or id here
div
div
table - I can’t drop a class or id here

Any suggestion?

I may be able to rewrite the report to output the raw tabular data and style into a table, but this seems overkill.

The system is on a customer box, so I can’t provide a link to the main site - sorry.

2

I think what you’re after is pretty simple:


.x .y {
    /* ... */
}

That will apply styles to any element with a class of “y” that has a parent with a class of “x”.

3

Thanks,

That will work with a direct parent, but what about further up the chain? I can only drop the class into an outer wrapper not the direct parent.

4

It doesn’t matter if it’s a direct parent.


.x .y {}

will hit anything that has .y and is in something that has .x somewhere up the chain.


.x>.y {}

will hit anything has has .y and it’s direct parent is .x.

5

Excellent, that seems to be doing the trick, many thanks