CODEWITHSUNDEEP
htmlcssweb
Ayub Maulana
Ayub Maulana

Reputation: 3

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

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 class="nav__item">
  <a href="#home" class="nav__link active-link">
    <i class="bx bx-home nav__icon"></i>
    <span class="nav__name">Home</span>
  </a>
</li>

Upvotes: 0

Views: 568

Answers (3)

Jakub Zavazal
Jakub Zavazal

Reputation: 60

.active-link > * {
    color: #2268ff;
}
<li class="nav__item active-link">
  <a href="#home" class="nav__link ">
    <i class="bx bx-home nav__icon"></i>
    <span class="nav__name">Home</span>
  </a>
</li>

Upvotes: 0

LOhivi
LOhivi

Reputation: 16

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

Upvotes: 0

Rohan Jawale
Rohan Jawale

Reputation: 11

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

.active-link {
  color: #2268ff;
}
<li class="nav__item active-link">
  <a href="#home" class="nav__link ">
    <i class="bx bx-home nav__icon"></i>
    <span class="nav__name">Home</span>
  </a>
</li>

Upvotes: 1

Related Questions