hovering over multiple divs - html

Question

i have 6 divs I want to zoom the div I am currently active on
My code is:
#section1,#section2,#section3 ,#section4,#section5,#section6{
width:200px;
height:200px;
background:#41aacc;
margin:20px;
cursor:pointer;
}
#wrapper{
width:60%;
margin:0 auto;
display:flex;
align-items:center;
justify-content:center;
flex-wrap:wrap;
}
<div id="wrapper">
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
</div>
<div id="section4">
</div>
<div id="section5">
</div>
<div id="section6">
</div>
</div>
i do not want to use multiple selector like #selector1:hover{transform:scale(1.1)}and so on .How can I achieve it without iterating it for all the divs.
Thanks in advance.

Answer 1

You need to write
div[id^="section"] {...}
this selector will get all of divs with id value starting with "section"
or more specific
#wrapper > div[id^="section"] {...}
Look at snippet
#wrapper > div[id^="section"] {
width: 200px;
height: 200px;
background: #41aacc;
margin: 20px;
cursor: pointer;
transition: all .5s ease;
}
#wrapper{
width: 60%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
#wrapper > div[id^="section"]:hover
{
transform: scale(1.1);
}
<div id="wrapper">
<div id="section1">
</div>
<div id="section2">
</div>
<div id="section3">
</div>
<div id="section4">
</div>
<div id="section5">
</div>
<div id="section6">
</div>
</div>

Answer 2

Use a CSS class. The following applies the transformation to all block elements directly under the "wrapper" div.
CSS:
#wrapper div {
// applies to all divs under wrapper.
width:200px;
height:200px;
background:#41aacc;
margin:20px;
cursor:pointer;
}
#wrapper .hoverable:hover {
// applies only to "hoverable" class items when hovered.
transform:scale(1.1)
}
HTML:
<div id="wrapper">
<div id="section1" class="hoverable"></div>
<div id="section2" class="hoverable"></div>
<div id="section3" class="hoverable"></div>
<div id="section4" class="hoverable"></div>
<div id="section5" class="hoverable"></div>
<div id="section6" class="hoverable"></div>
</div>