1

I have a CSS rule that tells all links to have a blue background color and a white text color. However, if I have an image with a link, a's rule gives them a little blue underline from the background color. I hope that makes sense.

Long story short, I would like to tell the a attribute to apply to everything except img elements. Here is my existing CSS code.

a {
  background-color:#0078D7;
  color:white;
}

I have already tried adding ":not(img)", but it didn't change anything. That code is right here.

a:not(img) {
  background-color:#0078D7;
  color:white;
}

Any help is appreciated.

Update: Here is a snippit of my existing HTML. When the image is clicked, it sends the user to the full view of the image, as intended.

<a href="../images/infobox.png"><img src="../images/infobox.png" width="300px"></a>
NotRollo
  • 51
  • 1
  • 6
  • Well, this is not how you do CSS. You don't apply an `element` to `another element`, you apply `instructions` for an element. – Plotisateur Nov 10 '18 at 17:31
  • @Plotisateur Then could you explain how I would fix it? To link an image I need to put the img element within the a element, which would of course apply the CSS I gave the a element to the img element as well, which is what I'm trying to prevent. – NotRollo Nov 10 '18 at 17:34
  • So If I understand you, you have something like `` and you want the style of your `a` not to apply to the style of the `img` inside ? Can you provide your HTML ? – Plotisateur Nov 10 '18 at 17:39
  • @NotRollo can you provide some snippet? – cse_vikashgupta Nov 10 '18 at 17:39
  • I have updated the question with an HTML snip. So yes @Plotisateur that's exactly it. – NotRollo Nov 10 '18 at 17:45
  • 1
    I have two ideas: 1) use classes instead of having styles for top level elements like a and img, 2) create a style for "a img" and place it after your style for "a" – ecg8 Nov 10 '18 at 17:56
  • Any style applied to img-tag after a-tag will overwrite img's inherited styling from a-tag. For example see this fiddle https://jsfiddle.net/d6jo5qmz/4/. Specially pay attention on cursor change from red to grey section. – WC2 Nov 10 '18 at 17:58
  • 2
    You could do it like this: https://jsfiddle.net/s53nfxv2/ perhaps? Unfortunately, though, there is - with only a few exception - no way to style an ancestor element based on its descendants. – David says reinstate Monica Nov 10 '18 at 18:05

4 Answers4

3

when you write

a:not([data-attr="img"])

You mean a link with an attribute named img. What you can do is use a data-attribute or a class attribute with the value img. And your code will work:

HTML5

<a data-attr="img" href="...">

CSS

a:not([data-attr="img"])

Good luck.

Edit:

I made a mistake the right CSS is

a:not([data-attr="img"])
Martin
  • 19,815
  • 6
  • 53
  • 104
Patrik
  • 351
  • 1
  • 4
  • 17
2

Essentially,

CSS can NOT effect a "parent" element (a) of a targeted element (img).

Therefore CSS can not be applied to an element based on if it does (or does not) contain any children and can not count any of these children if they do or do not exist.

Therefore, in the eyes of the anchor CSS definition, the fact it contains an image can't be articulated.

To work aound this we have a few options:

This CSS Tricks Article is a bit old but is a good concept introduction to CSS Specificity.
This link May also be of use.

For your specific case:

David's comment would fit the bill.

How I would fix the problem (general concept)

I would fix your problem using the :not operator and selecting certain situations as required.

CSS:

a {
  /* Rules for ALL anchors, primarily for anchors that contain images etc. */
  background-color:none;
  color: green;
}

/* Followed by rules ONLY for anchors that do NOT contain the .img class */
/* These will overwrite the above rule on the applicable elements */
a:not(.img){
  background-color:#0078D7;
  color:white;
}

HTML:

<a href="/images/infobox.png" class='img'><img src="/images/infobox.png" width="300px"></a>
<a href='https://www.google.com'>Goooooogle me!</a>

And here is a working demo:

    a {
      background-color:none;
      color: green;
    }

    a:not(.img){
      background-color:#0078D7;
      color:white;
      font-size: 1.2rem;
      letter-spacing:0.15;

    }
<div>
    <a href="https://i.pinimg.com/474x/f6/98/d5/f698d58d7201bbdb19d66377f13a3704--german-soldier-german-army.jpg" class='img'><img src="https://i.pinimg.com/474x/f6/98/d5/f698d58d7201bbdb19d66377f13a3704--german-soldier-german-army.jpg" width="300px"></a><br><BR>
    <a href='https://www.bing.com'>Goooooogle me!</a>
</div>
Community
  • 1
  • 1
Martin
  • 19,815
  • 6
  • 53
  • 104
0

What you want to achieve is to have a style for a which not apply when an img tag is inside

Writing 

a:not(img)

have no sense has an a element can't be an img element in the meantime

So you was on the right way, but used badly

You have to use a class instead to use :not selector

So we have : 

a:not(.img) {
  background-color:#0078D7;
  color:white;
}

and in your HTML you simply put a class=img whenever you have an img tag inside an a tag : 

<a class="img" href="../images/infobox.png"><img src="../images/infobox.png" width="300px"></a>
<a href="#">Another link</a>
Plotisateur
  • 468
  • 6
  • 18
  • You're right I made a mistake on the implementation of the first solution. I edited my post to correct it. – Patrik Nov 10 '18 at 18:32
0

You can use style tag after give a css class to an element..

<a href="google.com" class="cssClass" style="color=red" />
osman katib
  • 127
  • 1
  • 11