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?

Do you know the index of the span, and is it always the same? Can you use a more specific selector? — BenM
– BenM, Commented Jul 6, 2018 at 9:53

vaishali kapadia · Accepted Answer · 2018-07-06 10:39:50Z

3

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;}

edited Jul 6, 2018 at 10:39

answered Jul 6, 2018 at 9:55

vaishali kapadia

94411 silver badges22 bronze badges

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

4 Comments

gat kipper Over a year ago

in fact i want this red color to be applied on hover of fa-close any ideas please?

vaishali kapadia Over a year ago

@gatkipper use css for hover instead of normal .fa-close.extra:hover {color :red;}

gat kipper Over a year ago

thank's for your reply , but the color is set red by default

vaishali kapadia Over a year ago

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

Ankita Mehta · Accepted Answer · 2018-07-06 09:55:54Z

0

Apply internal css to that span only:<span class="fa fa-fw fa-close" style=color:red>

answered Jul 6, 2018 at 9:55

Ankita Mehta

4523 silver badges16 bronze badges

Comments

Mehran Taj · Accepted Answer · 2018-07-06 09:57:36Z

0

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

#fa-close{color :red;}

answered Jul 6, 2018 at 9:57

Mehran Taj

11 bronze badge

Comments

user10036985 · Accepted Answer · 2018-07-06 09:59:31Z

-1

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.

answered Jul 6, 2018 at 9:59

user10036985

2 Comments

vaishali kapadia Over a year ago

why the copy of the same answer from another user?

user10036985 Over a year ago

not copy when i uploaded answer after writing ...then i saw that someone else also gave the same answer

Collectives™ on Stack Overflow

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

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related