3

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
  • 71
  • 1
  • 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? – Vikas Gupta 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 Thomas Nov 10 '18 at 18:05

5 Answers5

5

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
  • 22,212
  • 11
  • 70
  • 132
Patrik
  • 401
  • 1
  • 6
  • 23
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
  • 22,212
  • 11
  • 70
  • 132
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
  • 476
  • 9
  • 23
  • 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
  • 135
  • 1
  • 14
-2

very good code

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="kula.css"> 
</head>
<body>
    <header>
        <div class="container-fluid bg-primary text-center">
            <div class="row">
                <div class="col">   
                    <img src="images/fehertigris.jpg" alt="Fehér Tigris" class="img-thumbnail kep" >
                </div>
                <div class="col-md-7">
                    <div class="row">
                        <h1 class="display-2 cim">Fehér tigris<h1></h1>
                    </div>
                    <div class="row">
                        <h2 class="cim">Ragadozó</h2>
                    </div>
                            
                    
                </div>
            </div>
            
        </div>
    </header>
    <main>
        <article class="bg-secondary">          
                <p>A fehér tigris a tigris (Panthera tigris) fehér színváltozata, vagyis nem taxon. 
                A természetben igen ritkán fordul elő, mivel feltűnő színe miatt a fehér egyedek 
                túlélési képessége kisebb, mint normál színezetű fajtársainak.
                </p>

                <p>A fehér tigrisek nem albínó tigrisek. Kék szemük és rózsaszín orruk van, bundájuk krémesen fehér, 
                amit csokoládé, vagy feketeszínű csíkok tarkítanak. Hosszuk körülbelül 2,4-3,1 méter, tömegük 
                hozzávetőlegesen 100–285 kg. Bundájuk ritkább, mint a szibériai tigrisé, a homokszín erőteljesebb, 
                a csíkok sötétebbek. A színüket egy velük született szokatlan génnek köszönhetik. Megfigyeltek 
                már olyan bengáli tigrist, melyeknek bundája csak részben volt fehér.
                </p>                
        </article>
        <article >
                <h3>Elterjedése</h3>
                <p>Délkelet-Ázsiában, India középső és déli részein, nagyon ritkán fordulnak elő. Az első fehér tigrist 
                1951-ben fogták be Közép-Indiában, és Mohannak nevezték el. Tőle származik a jelenleg fogságban 
                élő összes fehér tigris, mintegy 250 darab. Magyarországon négy helyen tartják: a Nyíregyházi 
                Állatparkban, a győri Xantus János Állatkertben, a felsőlajosi Magán Állatkertben és a 
                Pécsi Állatkertben.</p>             
        </article>
        <article class="bg-secondary">              
                <h3>Jellegzetességei</h3>
                <p>
                     <img src="images/kistigris.jpg" class="img-thumbnail kistigris">
                     A fehér tigris feltűnő fehér színét egy recesszív allél dupla megjelenése okozza, körülbelül minden
                    10 000. születésre jut egy fehér kölyök. Ezen fenotípus megjelenése azonban beltenyésztéssel is 
                    elérhető. A különös az, hogy csak a bengáli tigrisnél fordul elő ez a jelenség. Bár a fehér tigris
                    nagyon szép, a vadonban egyáltalán nem előnyös ez a bunda, hiszen a tigrisek egész élete azon múlik, 
                    mennyire jól tudnak elrejtőzni. Részeben ez bizonyítja, hogy a fehér színt okozó allélt létrehozó 
                    mutáció a bengáli tigris populációban történt, és innen nem terjedt át más alfajokra, hiszen a 
                    szibériai tigris környezetében sokkal kevésbé volna hátrányos a fehér szín, így sokkal kisebb 
                    volna a recesszív allél arányát csökkentő szelekciós hatás is. Ezért ha a szibéria tigris populációja 
                    rendelkezne a recesszív alléllal, akkor nagyobb arányban kellene előfordulnia a fehér egyedeknek, 
                    mint a bengáli tigris esetében, de ez nem így van, sőt néhány megkérdőjelezhető forrást kivéve nem 
                    is dokumentáltak fehér szíbériai tigrist. És mivel a fehér szín más, a szibériai tigrisénél 
                    hátrányosabb környezetben élő alfajnál nem fordul elő, feltételezhető, hogy a fehérséget okozó 
                    allél a bengáli tigrisnél jelent meg.
                </p>
        </article>
        <article class="bg-primary">
            <div class="container-fluid">
                <div class="row text-center">
                    <div class="row">   
                        <h3>További képek</h3>
                    </div>
                    <div class="row">
                        <div class="col"><img src="images/tigris01.jpg" class="img-thumbnail kep1"></div>
                        <div class="col"><img src="images/tigris02.jpg" class="img-thumbnail kep1"></div>
                        <div class="col"><img src="images/tigris03.jpg" class="img-thumbnail kep1"></div>
                    </div>
                
                    
                    
                
                </div>
            </div>                  
        </article>
    </main>
</body>
guba zeteny
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 03 '22 at 08:27
  • This does not provide an answer to the question. Once you have sufficient [reputation](https://stackoverflow.com/help/whats-reputation) you will be able to [comment on any post](https://stackoverflow.com/help/privileges/comment); instead, [provide answers that don't require clarification from the asker](https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can-i-do-instead). - [From Review](/review/late-answers/30977257) – AndrewF Feb 09 '22 at 01:42