How to apply css class on hover for just one html element

Question

i have a span like below :

<span  class="fa fa-fw fa-close">

and i want to have the fa-close in red color on hover, when I create the css class :

.fa-close:hover{color :red;}

it is applied to all spans with fa-close but i want it to be applied for just one span. How can i do it please?

Answer 1

Add extra class to specific span where you want to apply red colour

For example

HTML

<span  class="fa fa-fw fa-close extra">

and CSS like

.fa-close.extra {color :red;}

So now, wherever you want to apply red colour you can add this class.

Hope this helps :)

Update as per PO requirement

If you want red colour only on hover then your code be like below

HTML

<span  class="fa fa-fw fa-close extra">

and CSS like

.fa-close.extra:hover {color :red;}

Answer 2

仅将内部CSS应用于该范围： <span class="fa fa-fw fa-close" style=color:red>

Answer 3

If you want to apply css to only one element then you should use id instead of class.

#fa-close{color :red;}

Answer 4

Add new class in span and then write css by using that class

HTML

<span  class="fa fa-fw fa-close apply_only_one">

CSS

.apply_only_one.fa-close{color :red;}

This is the best solution of your Problem.