How can i affect more than one class on hover-CodePudding

I want to affect element's display,color or something when i hover a element.Class names can be different. Will not always contain sub.

Example:

.main{
  background:yellow;
  display:inline-block;
}
.sub{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.sub2{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.main:hover .sub,sub2{
  opacity:1;
}

<div class='main'>
  <div class='sub'></div>
    <div class='sub'></div>
    <div class='sub'></div>
  <div ></div>
</div>

I can do it like that but its look like dublicate.If i can do it will save 30 lines of code. Can i do it at once. Is it possible?

.main:hover .sub{
  opacity:1;
}

.main:hover .sub2{
  opacity:1;
}

CodePudding user response：

From your question it is unclear what your goal is.
maybe this helps:

.main:hover .sub, .main:hover .sub2{
  opacity:1;
}

In css (or scss) you can target multiple elements by separating them with a comma.

CodePudding user response：

You can select the class begins with a specified value :

[class^=sub]

Documentation

.main{
  background:yellow;
  display:inline-block;
}
.sub{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.sub2{
  width:50px;
  height:50px;
  background:blue;
  float:left;
  margin-right:10px;
  opacity:.2;
}
.main:hover  [class^=sub]{
  opacity:1;
}

<div class='main'>
  <div class='sub'></div>
    <div class='sub'></div>
    <div class='sub'></div>
  <div ></div>
</div>