title: How to trigger hover effect on child elements when hovering over the parent div?
body: <p>Currently, I am working on a nextJS web application and have some issue with the css. I have a div (parent node) and inside the div have multiple child elements. So whenever I hover over the <code>parent div element</code>, I want it to trigger on the <code>child elements</code> too.</p>
  <p>For example this is a simplified version of my code</p>
  <pre><code>export default function portfolio() {
  return (
      &lt;div className={homeStyles.mainContent}&gt;
          &lt;div className={homeStyles.titleNum}&gt;
              &lt;h2&gt;01&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div className={homeStyles.titleName}&gt;
              &lt;h2&gt;Telegram Bot&lt;/h2&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      )
  }
  </code></pre>
  <p>So whenever I hover over the parent div (.mainContent), it will change the background color as well as the child elements (Title Number and Title Name), will change font color and increase font size, <code>simultaneously</code>.</p>
  <p>Can anyone enlighten me how to make it happen using nextJS. Thank you.</p>
  <p><strong>EDITED</strong></p>
  <p>Not sure does this works?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;div class="main"&gt;
        &lt;div class="num"&gt;Num&lt;/div&gt;
        &lt;div class="name"&gt;Name&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>.main {
    background: blue; 
  }
  
  .main:hover {
    background: green;
  }
  
  .main:hover .num,
  .main:hover .name {
    color: red;
    font-weight: bold;
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Is there a better way to do this? Because it look kind of messy especially when I have about 6 child elements to trigger in one go. Anyway to make the code <code>more concise and slick</code>?</p>