Todo lo relacionado a Internet, Programación y Tecnología

Seleccionar un elemento que tenga varias clases CSS

Muchas veces cuando utilizamos HTML y CSS, las cosas son sencillas, ya que para empezar, CSS no es más que una sintaxis para darle estilos a una página con HTML. Un problema que no siempre surge, pero si en ciertas ocasiones, es el querer darle estilos a un elemento que tenga varias clases, y no solo una.

El ejemplo más común se podría dar con CMS's o CMF's como WordPress y Drupal, que agregan ciertas clases en la etiqueta body.

Ejemplo en Drupal:

<body class="not-logged-in page-admin">

Como Drupal nos muestra dos clases importantes en un mismo elemento, no tenemos muchas opciones; como para realizar la tarea de darle estilos a una página de administración, justo cuando el usuario se encuentra desconectado.

Tal es el caso de visitar la siguiente ruta mientras estamos desconectados:

http://www.example.com/drupal/admin

Ahora que ya esta explicado, o al menos tienen una idea de en que nos podría servir, en CSS3 podemos hacer lo siguiente:

body[class*="not-logged-in"][class*="page-admin"] #page-title {
font-size: 2em;
}

De esta manera solo se le aplican los estilos al elemento #page-title que se encuentra en una página que forzosamente debe tener las clases not-logged-in y page-admin, para que funcione correctamente.

Otra forma de hacerlo, y que creo que funciona en navegadores más antiguos, es hacer lo siguiente:

.not-logged-in.page-admin #page-title {
font-size: 2em;
}

Así se cumpliría con las condiciones correctamente, aunque aclarare que no lo he probado, pero se supone que el efecto es parecido, y no importa el orden en que se coloquen las clases (Por si les quedo la duda).

Básicamente es todo lo que se tiene que hacer, y no hay mejor forma de aprender, que a prueba y error. ;)

Escrito por Alan en 2018-02-11 04:50:13 UTC

Enlace permanente - categoría: Programación - etiquetas: css, html

« Plugin para hacer Scroll o desplazamiento suave hacia un elemento - jQuery.scrollTo - ¿Es necesario el atributo ALT en las imágenes? »