CODEWITHSUNDEEP
css
klvb
klvb

Reputation: 115

How to change external links color inside class

is possible change color external links inside some class? I tried this:

.space-page-content a {
    background: green;
    color: white;
}
.space-page-content a[href^="http://"]:not([href*="mywebsite.com"]):after,
.space-page-content a[href^="https://"]:not([href*="mywebsite.com"]):after{
   background: blue;
    color: white;
}
<a style="space-page-content" href="http://www.mywebsite.com/page-1/" >internal</a><br>
<a style="space-page-content" href="http://www.google.com" >external</a><br>
<a style="space-page-content" href="http://www.mywebsite.com" >internal</a>

Upvotes: 1

Views: 199

Answers (1)

Ahmed Tag Amer
Ahmed Tag Amer

Reputation: 1422

You have some errors in your CSS and HTML code,

  1. in CSS .space-page-content defined as class, while in your HTML its something else.
  2. also when your write like this .space-page-content a , this means that a is a child inside your parent .space-page-content. But in fact, your HTML says that this class is given to a, so you should say select 'a' that has class 'space-page-content' by this way a.space-page-content without any spaces between a and your class.
  3. you want to change the background of your a , so no need to add :after.

a.space-page-content{
    background: green;
    color: white;
}
a.space-page-content[href^="http://"]:not([href*="mywebsite.com"]),
a.space-page-content[href^="https://"]:not([href*="mywebsite.com"]){
   background: blue;
    color: white;
}
<a class="space-page-content" href="http://www.mywebsite.com/page-1/" >internal</a><br>
<a class="space-page-content" href="http://www.google.com" >external</a><br>
<a class="space-page-content" href="http://www.mywebsite.com" >internal</a>

Upvotes: 1

Related Questions