Can you set multiple elements hover declaration to only one div?

Question

I have few elements with the same property once its hovered over. I would like to know if I can set all those element at once such as below

 #el1:hover el2:hover el3:hover .test{
  }

I know the normal way would be

  #el1:hover .test{
  }

Is it possible to do something like this or similar on css, Please few free to update the question title as I found it hard to describe the problem.

Yes it will be work, you just need to add comma after each class aur id `#el1:hover, #el2:hover, #el3:hover, .test{ }` — Ayaz Ali Shah, Feb 20 '18 at 10:31
`#el1:hover .test, #el2:hover .test, #el3:hover .test { ... }` — Turnip, Feb 20 '18 at 10:31
I think you must read the rules in this page: https://www.w3schools.com/cssref/css_selectors.asp — bruce182, Feb 20 '18 at 10:33
Possible duplicate of [What do commas and spaces in multiple classes mean in CSS?](https://stackoverflow.com/questions/3344284/what-do-commas-and-spaces-in-multiple-classes-mean-in-css) — Scoots, Feb 20 '18 at 10:38
not clear: .test element is inside both #el1, #el2 and #el3? Could you share the markup? — Fabrizio Calderan, Feb 20 '18 at 10:38
Possible duplicate of https://stackoverflow.com/questions/12132884/how-to-define-multiple-classes-hover-event-in-css — bruce182, Feb 20 '18 at 10:41

Alessio Libardi · Answer 1 · 2018-02-20T10:39:26.130

2

You can do it like this:

#el1:hover, #el2:hover, #el3:hover .test{
  // some code
}

To have a deeper understanding of CSS Selectors read

edited Feb 20 '18 at 10:39

answered Feb 20 '18 at 10:32

Alessio Libardi

41
5

Ayaz Ali Shah · Answer 2 · 2018-02-20T10:43:35.227

Yes it will be work, you just need to add comma after each class or id. That comma will seperate the css class or id and style will be apply on all mentioned classes, ids or element references.

#el1:hover, #el2:hover, #el3:hover .test{ 
  some style
}

CSS Group Selector

When you apply same css style properties on diffrent elements using Classes, ID, or references is called group selector.

For example if you want to make color of following elements

<h2>Group Selector Heading</h2>
<p>Group Selector Paragraph</p>
<div class="container">Group Selector Container</div>
<span  id="message">Group Selector Message</span>

You can apply color on all above elements by using group selector method. It will minimize the code.

h2, p, .container, #message{
    color:#FF0000;
}

score 0 · Accepted Answer · answered Feb 20 '18 at 10:42

If the id of the parent elements starts with el you can use the [attr^="value"] starts-with attribute selector.

[id^="el"]:hover .test{
  // some code
}

Otherwise you will have to use the , to separate the selectors

#el1:hover .test,
#el2:hover .test,
#el3:hover .test{
 // some code
}

Finally you could add a common class to the parent elements so that you can target it directly

<div id="el1" class="common-class">
  <span class="test">..</span>
</div>

<div id="el5" class="common-class">
  <span class="test">..</span>
</div>

and use

.common-class:hover .test{
  // some code
}

score 0 · Answer 4 · answered Feb 20 '18 at 10:54

<!DOCTYPE html>
<html>
<head>
<style>
#el1:hover, #el2:hover, #el3:hover , .test{ 
 color:orange
}
</style>
</head>
<body>

<h1 id="el1">My First CSS Example</h1>
<h1 id="el2">My First CSS Example</h1>
<h1 id="el3">My First CSS Example</h1>
<h1 class="test">My First CSS Example</h1>

</body>
</html>

Can you set multiple elements hover declaration to only one div?

4 Answers4