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?
 
Brandon LyonConnect With a Mentor Senior 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
 
Snarf0001Connect With a Mentor Commented:
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
 
Snarf0001Connect With a Mentor Commented:
Unfortunately yes.  Unless you can control the "hack" and use spans instead of direct text, it can't be done.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.