CSS to colour a parent element based on content of attribute on a child element

[jonathanh]

Hi,

I'm using XMAX 5.5. An example might help:

<parent>
  Some text of some kind.
  <child status="something" />
</parent>

If 'status' is an empty string, then all of <parent> should be red. Otherwise it should be black.

I've tried doing this sort of thing:

parent
{
    color: black;
}

parent > child[status=""]
{
    color: red;
}

However, I am aware that this is wrong in that it is the <child> element to which the CSS will be applied (which makes no sense in this case as <child> has no visible content).

I want the styling to be applied to the <parent> element instead.

Any thoughts on how I might acheive this in CSS alone would be very much appreciated.

Thanks

Jonathan

[Su-Laine Yeo]

I don't know of a way to achieve exactly what you're looking for, however if you need to signal that the child element has an empty attribute, you could do this by using before-text to make the child element visible and styled. For example:

child[status=""]:before
{
    display: inline;
    content: "No status specified";
    color: red;
}

Would this work for you?

[jonathanh]

Hi,

Thanks for your reply. That's an interesting idea and I may will use that technique in other areas in future. However, the example I gave was a simplification. In the real application, the <parent> element will be much bigger and there will be a long list of them. We want the users to easily be able to identify these elements by means of colour.

I think I'll simply have to add an attribute to the <parent> element itself and update this. I'd rather not do this; it is for presentation purposes only and I'll have to muddy the XSD and XML. However, we can always use a transform to clean the XML before the next stage.

Thanks again for your help

Jonathan

[Su-Laine Yeo]

Hi Johnathan,

It might be possible to do the colouring by script instead of changing your DTD. We're looking into this now.

[jonathanh]

Hi,

It would be great to see another alternative such as this. I really appreciate your time.

Thanks

Jonathan

[Derek Read]

I agree that there is not going to be a way to do this given current functionality with our CSS, which basically follows the W3C Recommendations.

In theory a feature could be added that is non-standard CSS that might help, but for the most part we would prefer to follow the W3C CSS Recommendations so that people familiar with CSS can easily adapt that knowledge when defining CSS to be used with our products. CSS selectors basically work by finding a particular element in a top down manner, and then styling the innermost element in that top-down structure.

What you seem to be asking for is another type of selector that works from the bottom-up and that styles the outermost element. This is an interesting idea but I don't see the W3C moving in this direction at the moment.

As such, a scripting solution for this is likely the only approach, requiring this very basic logic:

1. Find the elements you wish to style (by walking the DOM, using Range objects, or perhaps Document.getNodesByXPath).
2. Style each of the elements you find using the Selection.ContainerStyle API.