Oxygen XML Forum

Posted: **Fri Sep 09, 2022 4:20 pm**

I'd like to tweak the default Author css file to highlight images without the ALT attribute and also those with the ALT, but containing a comment inside.

Correct:

Code: Select all

<inlinemediaobject>
    <imageobject>
        <imagedata fileref="icon.svg"/>
    </imageobject>
    <alt>Print</alt>
</inlinemediaobject>

Incorrect:

Code: Select all

<inlinemediaobject>
    <imageobject>
        <imagedata fileref="icon.svg"/>
    </imageobject>
</inlinemediaobject>

Incorrect:

Code: Select all

<inlinemediaobject>
    <imageobject>
        <imagedata fileref="icon.svg"/>
    </imageobject>
    <alt><!-- FIXME --></alt>
</inlinemediaobject>

So I have the rule which highlights every image:

Code: Select all

inlinemediaobject {
    background-color: coral;
}

And there is a complementary rule which clears highlighting in specific conditions. I am able to detect the existence of the ALT element, but I can't subtract cases when this element contains a comment (to keep the third example highlighted).

Code: Select all

/* this rule doesn't cover the third case
inlinemediaobject:has(alt) {
    background-color: inherit;
}
*/

/* this rule also doesn't cover third case
inlinemediaobject:has(alt:not(oxy|comment)) {
    background-color: inherit;
}

Is something like this possible in Oxygen CSS?

Posted: **Fri Sep 09, 2022 4:27 pm**

Hi honyk,

Would something like this work? (Sorry for any typos, I didn't test it.)

Code: Select all

inlinemediaobject:not(:has(alt)),
inlinemediaobject:has(alt:has(oxy|comment)) {
    background-color: coral;
}

Posted: **Fri Sep 09, 2022 4:58 pm**

Thanks for the different approach. It works with a small tweak. In the first line I had to add * char.

Code: Select all

inlinemediaobject:not(*:has(alt)),
inlinemediaobject:has(alt:has(oxy|comment)) {
    background-color: coral;
}

And this helped also in my original approach:

Code: Select all

inlinemediaobject {
   background-color: coral;
}

inlinemediaobject:has(alt:not(*:has(oxy|comment))) {
   background-color: inherit;
}

So I can now even choose one of two ways

Thanks for a hint!

Oxygen XML Forum

Specific CSS selector to highlight incomplete stuff

Specific CSS selector to highlight incomplete stuff

Re: Specific CSS selector to highlight incomplete stuff

Re: Specific CSS selector to highlight incomplete stuff