How do I replace card links color in Bootstrap 4?-CodePudding

How do I change the link color into this Bootstrap 4 card without affecting the link color of other cards on the same HTML page?

      <div >
          <div >
               <a href="#">
                    <div >
                         <i  style="font-size: 36px"></i><br/>
                         <p >CODE SAMPLES</p>
                    </div>
               </a>
          </div>
      </div>

I've tried this but it affects all cards on the HTML page:

<style>
   .card a:link {
    color: white;
   }

   .card a:visited {
    color: white;
   }

   .card a:hover {
    color: white;
    text-decoration: none;
   }

   .card a:active {
    color: white;
   }
</style>

CodePudding user response：

Paste the code in your CSS file you need to change the focus color in p tag

.card a:link {
    color: #333;
   }

   .card a:visited p{
    color: white;
   }

   .card a:hover p{
    color: green;
    text-decoration: none;
   }

   .card a:active p{
    color: white;
   }
.card a:focus p{
    color: #f00;
}

<div >
      <div >
           <a href="#">
                <div >
                     <i  style="font-size: 36px"></i><br/>
                     <p >CODE SAMPLES</p>
                </div>
           </a>
      </div>
  </div>

CodePudding user response：

Write The CSS code for icon color change in focus & hover mode

.card a:hover i,
.card a:focus i{
    color: #f00;
}