General XMetaL Discussion

XMetaL Community Forum General XMetaL Discussion CSS to colour a parent element based on content of attribute on a child element

  • jonathanh

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

    Participants 4
    Replies 5
    Last Activity 12 years, 9 months ago

    Hi,

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

      Some text of some kind.
     

    If 'status' is an empty string, then all of 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 element to which the CSS will be applied (which makes no sense in this case as has no visible content).

    I want the styling to be applied to the element instead.

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

    Thanks

    Jonathan

    Reply

    Su-Laine Yeo

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

    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?

    Reply

    jonathanh

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

    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 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 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

    Reply

    Su-Laine Yeo

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

    Hi Johnathan,

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

    Reply

    jonathanh

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

    Hi,

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

    Thanks

    Jonathan

    Reply

    Derek Read

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

    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.

    Reply

  • You must be logged in to reply to this topic.

Lost Your Password?

Products
Downloads
Support