Blog
Bienvenido a la sección “Clases en CSS”. Aquí vamos a profundizar en el lenguaje CSS y vamos a agrandar nuestro conocimiento de este importante lenguaje de diseño web. Aprenderás todo lo que necesitas saber acerca de las clases. Te felicito por haber llegado tan lejos en este curso. Sigamos con la lección.
¿Qué es una clase?
Las clases en lenguaje CSS se utilizan comúnmente para definir un conjunto de estilos en CSS y luego aplicarlos en un elemento del código HTML utilizando selectores como herramienta. Para definir una clase dentro de una hoja de estilo CSS, utilice el selector de puntos, como se indica a continuación:
<style> .nice { font-family: sans-serif; } </style>
Cada elemento del código HTML puede tener un conjunto de clases, estas clases estan ordenadas en un orden específico. Cada clase añadirá potencialmente un conjunto de definiciones de CSS de acuerdo con los estilos que se definieron en la página. En este trozo de código hemos definido una regla CSS que se aplicará a cada elemento que contenga la clase “ejemplo”. Esto significa que una vez que este código ha sido definido dentro de la página HTML, el siguiente párrafo HTML tendrá el estilo aplicado:
<style> .nice { font-family: sans-serif; } </style> <p class="nice">This is a short sentence.</p>
API de lista de clases HTML5
Luego de haber conocido el mundo de las JavaScript y de sus librerías, muchas veces me hice esta pregunta: ¿ Cuándo verán los proveedores de los navegadores web, los métodos o bibliotecas de ayuda creados por los kits de herramientas de JavaScript e implementarán estas funcionalidades de forma nativa dentro del navegador web? Me he dado cuenta de que los estándares son parte importante, y que los proveedores de navegadores no pueden permitirse el lujo de evaluar a medias estas implementaciones, pero sí creo que podrían agilizarse un poco en el proceso, jejeje. Sin embargo; la buena noticia es que una de estas funciones se ha agregado a la API HTML5; ClassList.La versión 5 de HTML introdujo una nueva forma de editar la lista de clases de un elemento usando la colección classList. Cada elemento HTML devuelve la colección accediendo al miembro element.classList. La lista de clases permite añadir, eliminar, alternar y comprobar si un elemento contiene una clase específica.
El objeto classList, añadido a todos los nodos dentro del DOM, proporciona a los desarrolladores métodos para añadir, eliminar y alternar clases CSS en un nodo. classList también permite a los desarrolladores comprobar si una clase CSS ha sido asignada a un nodo dado.
Veamos aquí en el siguiente código un ejemplo:
</pre> <!DOCTYPE html> <html> <head> <title>Ejemplo</title> <style> .nice { font-family: sans-serif; } </style> </head> <body> <p id="mytext">My text</p> <script> var el = document.getElementById("mytext"); el.classList.add("nice"); // añade la clase nice al párrafo el.classList.remove("nice"); // elimina la clase nice del párrafo el.classList.toggle("nice"); // añade la clase nice al párrafo de nuevo, ya que no lo hace actualmente // contienen la clase nice. if (el.classList.contains("nice")) { alert("The element contains the 'nice' class."); } </script> </body> </html> <pre>
Aquí te muestro este código por secciones para que lo veas mejor:
Adición de una clase CSS
El método add le permite añadir una clase más con separación de espacios:
<script> var el = document.getElementById("mytext"); el.classList.add("nice"); // añade la clase nice al párrafo </script>
Eliminar una clase CSS
El método add le permite eliminar una sola clase:
<script> var el = document.getElementById("mytext"); el.classList.remove("nice"); // elimina la clase nice del párrafo </script>
Puedes separar varias clases por espacio, pero el resultado puede no ser muy confiable que digamos.
[…] Clases en CSS […]