Utilice «selector» (sin el punto inicial) para apuntar a un elemento contenedor.
Por ejemplo, si ha colocado una imagen (o cualquier elemento secundario) en una columna, es posible que desee aplicar estilo al envoltorio que rodea la imagen oa la imagen en sí.
Coloquemos un borde rojo sólido de 5px alrededor de los distintos elementos para ver qué sucede.
Primero, arrastre un widget de imagen a una columna y vaya a Imagen> Avanzado> CSS personalizado
Ahora, en la pestaña CSS personalizado, ingrese lo siguiente:
selector { border: 5px solid red; }
Como está editando el widget Imagen, es posible que se sorprenda al descubrir que el borde no rodea la imagen en absoluto. En cambio, rodea el elemento contenedor, que en este caso, es la columna en la que se encuentra la imagen.
Para especificar el elemento secundario, o en este caso, la imagen, ingrese lo siguiente en el CSS personalizado:
selector img { border: 5px solid red; }
Esto colocará el borde alrededor de la imagen porque ha especificado que debería afectar al “selector img”.
Ahora intente esto con otro ejemplo.
Arrastra un widget de botón a una columna y dale 10 píxeles de relleno para que puedas ver bien la columna que lo rodea. Haz esto yendo al botón Avanzado pestaña y configuración Relleno a 10 para todos los lados.
Su botón ahora debería verse así (sus colores pueden variar):
A continuación, apliquemos un color de fondo usando CSS personalizado.
Introduzca la siguiente:
selector { background-color: #ffff00; }
Como antes, esto se aplicará a la envoltura del elemento de botón, en lugar del botón en sí. Esta vez, notarás que los 10px de relleno evitan que toda la columna se vea afectada por nuestro estilo.
Y, por supuesto, si desea que el color de fondo se aplique al botón en lugar de su envoltorio, puede ingresar lo siguiente en su lugar:
selector .elementor-button { background-color: #ffff00; }
Esto dará como resultado que el fondo del botón sea amarillo.
Utilizar selector como un atajo de Elementor para ayudarlo a escribir CSS personalizado más rápida y fácilmente. Sin embargo, siempre tiene la opción de usar su propia clase personalizada.
Rehagamos el fondo de ese botón, pero esta vez, le daremos al botón una clase personalizada, a la que llamaremos «tan amarillo». (Ir Avanzado> Clases CSS y asegúrese de no incluir el punto anterior aquí).
Ahora, en la pestaña CSS personalizado, en lugar de usar «selector», simplemente haremos referencia a la clase personalizada «.so-yellow», y sí, deberá incluir el punto anterior aquí.
Como era de esperar, la envoltura del botón ahora muestra nuestro color amarillo brillante como fondo.
¿Qué sucede si luego apuntamos al botón?
Introduzca la siguiente:
.so-yellow .elementor-button { background-color: #ffff00; }
Notarás que el color púrpura del botón no NO ¡cambio!
Eso es porque nuestro nuevo estilo necesita una !importante declaración agregada en este caso.
.so-yellow .elementor-button { background-color: #ffff00 !important; }
Ahora, se aplica nuestro estilo y nuestro botón es amarillo nuevamente.
Solo por diversión, y para evitar que el texto de nuestro botón se pierda en el fondo amarillo brillante, terminemos de diseñar el botón cambiando el color del texto. También agregaremos un borde al botón. Independientemente del método que utilice, “selector .elementor-button” o “.so-yellow .elementor-button”, el código adicional será el mismo.
selector .elementor-button { background-color: #ffff00; color: #000000; border: 2px solid #000000; }
Disfruta usando selector siempre que desee agregar CSS personalizado rápidamente para apuntar al contenedor de ese elemento.
Consejo: para obtener una lista de nombres de clases, consulte Excelente guía de referencia de nombres de clases de widgets de Frank Tielemans
