How do I change the color of the span and i inside an anchor with CSS?-CodePudding

I'm trying to change the color of all elements inside of an anchor tag. These elements are i and span. However, I can't get my solution to work. Should I change the color one by one in CSS?

HTML and CSS

.active-link {
  color: #2268ff;
}

<li >
  <a href="#home" >
    <i ></i>
    <span >Home</span>
  </a>
</li>

CodePudding user response：

You can directly add the class name to the "li" tag

.active-link {
  color: #2268ff;
}

<li >
  <a href="#home" >
    <i ></i>
    <span >Home</span>
  </a>
</li>

CodePudding user response：

What you have shared should work. If this isn't working, I suspect some other CSS rules are overriding your CSS. By default there shouldn't be a style attached to the <span> or <i> elements. They might get one from the browser (user agent stylesheet) or (like in your case) it should come from its parent (inherited from). Screenshot from browser developer tools

CodePudding user response：

.active-link > * {
    color: #2268ff;
}

<li >
  <a href="#home" >
    <i ></i>
    <span >Home</span>
  </a>
</li>