CODEWITHSUNDEEP
css
user8782879
user8782879

Reputation:

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

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.

Upvotes: 1

Views: 2308

Answers (4)

supriya suresh g
supriya suresh g

Reputation: 385

<!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>

Upvotes: 0

Ayaz Ali Shah
Ayaz Ali Shah

Reputation: 3531

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

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

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
}

Upvotes: 0

Alessio Libardi
Alessio Libardi

Reputation: 41

You can do it like this:

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

To have a deeper understanding of CSS Selectors read

Upvotes: 2

Related Questions