CODEWITHSUNDEEP
css
Gecko Boy
Gecko Boy

Reputation: 1

Different color for bold links

I wish to:

  1. Make bold text black
  2. Make bold links the color #FFAA3B

The below code turns bold text black but links are also black. Can someone please point out what I'm doing wrong?

.entry-content a {
        color: #FFAA3B !important;
    }
    
    .entry-content strong {
       color: black;
    }
    
    .entry-content strong > a {
        color: #FFAA3B !important;
    }
<div class="entry-content">
  <strong> this is bold </strong>
  <a> this is a link </a>
</div>

Upvotes: 0

Views: 90

Answers (3)

Stacks Queue
Stacks Queue

Reputation: 1142

.entry-content a {
    color: #ffaa3b !important;
}

.entry-content strong {
    color: black;
}

.entry-content strong > a {
    color: #ffaa3b !important;
}
 <!--black in color-->
 <div class="entry-content">test</div>
 
 <!-- #FFAA3B in color -->
<div class="entry-content"><strong><a>www.thisislink.com</a></strong></div> 

<!--black in color -->
<div class="entry-content"><strong>I am strong</strong></div> 

<!--black in color -->
<div class="entry-content"><a><strong>www.thisislink.com</strong></a></div>

Your code works well you just have to put the <a> tag inside the <strong> tag

Upvotes: 2

user13146129
user13146129

Reputation:

I don't know what is wrong with your code. For me, your source code is working correctly.

Nevertheless, I am submitting my source code

.entry-content a {
        color: #FFAA3B;
    }
    
    .entry-content strong {
       color: #000000;
    }
    
    .entry-content a {
        color: #FFAA3B;
    }
<div class="entry-content">
  <strong> this is bold </strong>
  <a href="https://www.google.com/"> this is a link </a>
</div>

Upvotes: 1

Rohit Tagadiya
Rohit Tagadiya

Reputation: 3730

I think you want something like this..

.entry-content a {
    color: #FFAA3B !important;
}
    
.entry-content strong {
    color: black;
}
    
.entry-content strong > a {
     color: #FFAA3B !important;
}
<div class="entry-content">test</div> //black in color
<div class="entry-content">
  <strong>
    <a>www.thisislink.com</a>
  </strong>
</div> //#FFAA3B in color
<div class="entry-content">
  <strong>I am strong</strong>
 </div> //black in color
<div class="entry-content">
  <a>
    <strong>www.thisislink.com</strong>
  </a>
</div> //black in color

Upvotes: 1

Related Questions