Custom CSS not working in Laravel

Question

On my Laravel Project, i have the following CSS files

<link rel="stylesheet" type="text/css" href="{{ asset('assets/vendors/iCheck/css/all.css') }}"  />
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/lib.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/skins/iot_skin.css') }}">
<link rel="stylesheet" type="text/css" href="{{ asset('assets/css/member/custom.css') }}">

Class in custom.css:

a .active-link{
color: blue;
}

In blade:

<a href="{{ route('parts.import.excel') }}" class="active-link">@lang('nav.importexcel')</a> |

This class is not working! I have to style it inline to get a result.

Please let me know if you have an idea where i have to search. Thanks

Answer 1

Firstly, there shouldn't be a space between a and .active-link. it should be:

a.active-link {
    color: blue;
}

The difference between a .active-link and a.active-link is subtle in code, but very important in implementation. a .active-link means "select an element with the active-link class that is inside an <a> element." On the other hand, a.active-link means "select an <a> element that also has the class of active-link on it." In your case, you want a.active-link since the <a> element is the same element that has the active-link class.

Secondly, you can use !important to ensure it gets color: blue

a.active-link {
    color: blue !important;
}

!important means that that rule (in this case setting the color to blue) will override all other color rules that are being applied to the targeted element. To learn more about how certain rules get applied over other rules, CSS-Tricks has a great article on CSS Specificity.