Tengo una galería de cartera donde el primer elemento es una cuadrícula de 2 filas y 2 columnas y justo a eso hay 2 imágenes pequeñas.

La cartera tiene filtro y si hago clic en la pestaña de filtro filtra las imágenes, pero la primera imagen ahora es pequeña. Tengo una pregunta ¿Cómo puedo agregar el primer elemento activo a un estilo?

HTML:

 .elementor-portfolio //class where is articles of each portfolio image article.elementor-active //portfolio item what is active

CSS:

 grid-column: 2!important; grid-row: 2!important;

Lo que he probado:

 jQuery(function($) { $(".elementor-portfolio article.elementor-active").first().css({ 'grid-column' : '2!important', 'grid-row' : '2!important' }); });

CÓDIGO:

 <style> .active-one { grid-column: span 2; grid-row: span 2; } .active-twothree { grid-column: span 1; grid-row: span 1; } </style> <script> jQuery(function($) { $(".custom-grid .elementor-portfolio__filters li").click(function(){ $(".custom-grid .elementor-portfolio .elementor-active").first().addClass("active-one"); }); $('.custom-grid .elementor-portfolio .elementor-active:gt(0)').removeClass('active-one'); }); </script>