Specific CSS selector to highlight incomplete stuff

honyk
Posts: 176
Joined: Wed Apr 29, 2009 4:55 pm

Specific CSS selector to highlight incomplete stuff

Post by honyk »

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?
chrispitude
Posts: 907
Joined: Thu May 02, 2019 2:32 pm

Re: Specific CSS selector to highlight incomplete stuff

Post by chrispitude »

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;
}
honyk
Posts: 176
Joined: Wed Apr 29, 2009 4:55 pm

Re: Specific CSS selector to highlight incomplete stuff

Post by honyk »

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!
Post Reply