CSS selector for a "pattern-matching" like expression

Is there a way in CSS that you can specify that states that if you have an anchor tag followed by text or not an image tag, then the link text should be made bold and have a background colour but if there is anything "inside" the anchor then nothing should happen? So if we have <a href="www.google.com">Google</a> Google should be bold and in a dark blue background colour, but if we have <a href="www.google.com"><img src="google.png"></a>, nothing should happen?
gklukAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brandon LyonSenior Frontend DeveloperCommented:
<a href="www.google.com">Google</a>
<div>something</div>
a:empty {
   /* These are styles for when an anchor is empty*/
}

Open in new window


a + div {
   /* These are styles related to a div which comes directly after anchor tag */
}

Open in new window


/* There is no way in CSS to determine if an anchor contains an image tag, then style the anchor */
/* You can use javascript to apply styles in this case, or surround the text inside the anchor with a <span> and style that */
<a href="www.google.com"><span>Google</span></a>
a span {
  /* Styles applied to the span tag */
}

Open in new window


a[href="www.google.com"] {
  /* Styles which apply to an anchor tag linking to www.google.com */
}

Open in new window


a[href*="google"] {
  /* Styles which apply to an anchor tag linking to a URL which contains the phrase google */
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Snarf0001Commented:
Unfortunately you can't do that directly, but can kind of hack around it.
For a variety of reasons, you can't style a PRECEEDING element based on it's children (other than :empty).  And the :empty selector only works if there's absolutely nothing in there, no elements, no inline text, etc...

The only way you could do this, would be to add a <span> instead of the direct text, and apply the styling directly to the span instead.

<a href="#"><span>Google</span></a>

Open in new window

a > span { background:blue; }

Open in new window


Or if you wanted to get more complex and make sure it was the only span inside the anchor:
a > span:first-child:last-child { background:blue; } 

Open in new window



Obviously that gets messier, as default underlining of the <a> tag would be in a different color etc....
0
gklukAuthor Commented:
The problem with this is that I intended it to be a generic style applied on all webpages so I wouldn't know in advance what the layout is. If I just use the CSS rule for the anchor tag and the link has an image rather than text then the whole image becomes a blue mass once you hover over it which is obviously not desirable. Is the verdict then that this is not possible unless you know exactly what the layout of the page is and then you write CSS rules for this specific layout?
0
Snarf0001Commented:
Unfortunately yes.  Unless you can control the "hack" and use spans instead of direct text, it can't be done.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.