При наведении на дочерний блок не изменять родительский

У меня есть сложеннная структура из div:

 <div className='XL-container' style={{border: '1px solid black', width: '200px', height: '200px'}}>
              <div className='L-container' style={{borderRight: '1px solid black', width: '150px', height: '200px'}}>
                <div className='M-container' style={{borderBottom: '1px solid black', borderRight: '1px solid black', width: '100px', height: '150px'}}>
                  <div className='S-container' style={{borderBottom: '1px solid black', width: '100px', height: '100px'}}>
                    <div id='XS-container' className='XS-container' style={{borderRight: '1px solid black', width: '50px', height: '100px'}}>
                      <div className='XSS-container' style={{zIndex: '2', borderBottom: '1px solid black', width: '50px', height: '50px'}}>XXS</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

Получается нечто подобное:

Я хочу, чтобы при наведении на блок XXS он подкрашивался голубым. При наведение на его родительский блок уже подкрашивался этот блок побольше и т.д. Но возникает проблема, что при наведении на маленький блок, подкрашиваются все блоки:

.XSS-container:hover {
  background-color: rgba(219, 112, 147, 0.5);
}

.XS-container:hover {
  background-color: rgba(219, 112, 147, 0.5);
}

.S-container:hover {
  background-color: rgba(219, 112, 147, 0.5);
}

.M-container:hover {
  background-color: rgba(219, 112, 147, 0.5);
}

.L-container:hover {
  background-color: rgba(219, 112, 147, 0.5);
}

.XL-container:hover {
  background-color: rgba(219, 112, 147, 0.5);
}