CODEWITHSUNDEEP
htmlcssclasshyperlinkcolors
Armando Silva
Armando Silva

Reputation: 27

Change color of link inside span class

I have: 

<span class="field-content highlight-front">
   <a href="/node/42" hreflang="en">This is an example</a>
</span>

in the css file i want to change the color of the link by using the span class.

.highlight-front{ 
   color: blue;
}

but that doesn't seem to work. Any suggestions or places to read about targeting a link through a span class?

Upvotes: 1

Views: 11000

Answers (4)

alifallahi
alifallahi

Reputation: 330

you can also try this
<span class="field-content">
   <a class="highlight-front" href="/node/42" hreflang="en">This is an example</a>
</span>

Upvotes: 0

jafarbtech
jafarbtech

Reputation: 7015

add .highlight-front a{ in the class to specify all a tags inside span with class highlight-front

.highlight-front a{ 
   color: blue;
}
<span class="field-content highlight-front">
   <a href="/node/42" hreflang="en">This is an example</a>
</span>

Upvotes: 0

Yaser
Yaser

Reputation: 5719

You have to specify element inside span for colouring, which means adding a after your class name (child of span):

Use this:

.highlight-front a{ 
   color: blue;
}

See here:

https://plnkr.co/edit/Tn3IomLmUaobN59Cdg4j?p=preview

Upvotes: 4

Sam Chivers
Sam Chivers

Reputation: 34

You could achieve this by the following:

<span class="field-content highlight-front">
    <a href="/node/42" hreflang="en">This is an example</a>
</span>

.highlight-front a{ 
    color: blue; 
 }

Which will colour any <a> found as a decendent of the .highlight-front class.

Upvotes: -1

Related Questions