Diferentes elementos para diferentes usuarios

Preparación del código

Implementación del código

Para implementar esta vitamina sólo nos llevará unos pocos minutos ya que vamos a trabajar con CSS básico y sólo emplearemos 1 trozo de código.

Ocultar elementos a usuarios

Lo primero que haremos es ir al editor de código y añadiremos lo siguiente:

body.logged-in .solo-visitantes {
	display: none;
}

Esta regla lo que hace es ocultar todos los elementos que tengan la clase .solo-visitantes a las personas que ya han iniciado sesión.

Y ahora lo último que tenemos que hacer es añadir esa clase a todos esos elementos que no queramos que el usuario vea al iniciar sesión en la web.

Puedes reemplazar la clase “.solo-visitantes” por otro nombre que te guste, pero asegúrate que vayas a añadir ese mismo nombre de clase a los elementos que quieras ocultar.

Ocultar elementos a visitantes

Ahora vamos a ver cómo ocultar elementos sólo para usuarios.

En este caso, antes del body añadimos «:not(.logged-in), ya que aquí lo que hacemos es ocultar los elementos cuando la persona no ha iniciado sesión, es decir, para visitantes.

body:not(.logged-in) .solo-usuarios {
	display: none;
}

Optimizando el código

Para reducir las líneas de código en la página, te recomiendo que combines ambos códigos en una misma línea de esta forma:

body.logged-in .solo-visitantes, body:not(.logged-in) .solo-usuarios {
	display: none;
}