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

what if you'd wrote: a.active-link{color: blue;} (no space between)? — Rafdro
– Rafdro, Commented Nov 2, 2017 at 10:54

Nathan Heffley · Accepted Answer · 2017-11-02 15:07:09Z

2

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.

edited Nov 2, 2017 at 15:07

Nathan Heffley

6105 silver badges12 bronze badges

answered Nov 2, 2017 at 10:56

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ron van der Heijden Over a year ago

You should explain your answer, why is a .class and a.class different? When use !important?

M. Eriksson Over a year ago

@Peter - If the solution worked for you, you should accept the answer. Then the poster will get his well earned rep and others will know that the issue has been resolved.

Collectives™ on Stack Overflow

Custom CSS not working in Laravel

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related