Search code examples
csspseudo-class

How can I use the CSS before selector for links except those containing an <img>

a:before {
    content: "› ";
}

a img:before {
    content: ""
}

I know the above syntax is incorrect technically and semantically, but I want to exclude the content from the a tag any time an img is included within. Is this possible, or should I do it with a class instead, i.e.

a:before {
    content: "> ";
}

a.no-before:before {
    content: "";
}

I'd prefer to do it without having to define classes for it, but I can see that might be required.

I'd like to do this with only CSS, no JS involvement.

Solution

  • As the CSS psuedo-selectors didn't seem up to the task, I went the route of having a class which excluded the :before content where I didn't want it:

    a:before {
    content: "› "
}

a.no-before-content:before {
    content: ""
}