Solucionado
Porque si utilizo el codigo: .productos h2:hover{ font-size: 33px; } No obtengo el mismo resultado que utilizando el codigo .productos li:hover h2{ font-size: 33px; } (que es el codigo que se explica en el video)
ya que pensaba que la etiqueta h2 deberia estar ubicada antes del :hover
Hola Jean, no sé cómo se comportan en tu caso ambas declaraciones ya que no tengo contexto de tu código, pero te puedo explicar el concepto:
Cuando declaras .productos h2:hover { font-size: 33px; }, lo que estás haciendo es aplicarle esos estilos al h2 cuando le haces hover al mismo h2.
En cambio, cuando usas li:hover h2 { font-size: 33px; }, estás aplicándole los estilos al h2 cuando le haces hover al li.
Como puedes ver es una diferencia sutil, pero puede generar diferentes resultados si, por ejemplo, el h2 está en un z-index inferior al li, ya que ahí no le puedes hacer hover al h2 pues está por debajo del li, y en ese caso solo te serviría el segundo código.
Si no estás familiarizado con el concepto del z-index, te recomiendo ver su artículo en la documentación de Mozilla, pero como resumen es básicamente la superposición de elementos en el plano, algo así como controlar su posición en un espacio en 3d.
Saludos!