Vamos a continuar donde lo dejamos, para los que os saltasteis la clase anterior, estuvimos estudiando los selectores de etiqueta en CSS3. Ya os comente que la necesidad de los diseñadores, favoreció la incorporación de nuevos selectores en CSS en su versión 3. Nosotros vamos a seguir estudiándolos todos y hoy vamos a continuar nuestro estudio con los selectores de clase.
Los Selectores de clase
Los selectores de clase nos permite seleccionar o afectar, ciertas
etiquetas, en función al valor de su atributo class="". Recuerda que el atributo class="", es un atributo que nosotros asignamos a una etiqueta que se encuentra definida en un documento HTML.
Cuando nos encontramos trabajando en nuestra hoja de estilos y queremos mencionar o hacer referencia a una clase, se empieza siempre por un punto. Al colocar el punto el navegador sabe que va a buscar una clase.
En el siguiente ejemplo, vemos como aplicar un color de fondo a aquellas etiquetas HTML que tienen la clase con el valor titulo-h2. Ya sabéis como ver el resultado en el navegador, si os coloco aquí una imagen de cual es el resultado, no lo vas a practicar por tu cuenta. Yo aprendí HTML5 y CSS3 de esta forma, la practica hace al maestro.
<!-- HTML --> <h2 class="titulo-h2">Titulo 1</h2> <p class="introduccion">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque rem neque saepe velit fuga natus id vero ipsum debitis possimus repellendus consectetur, fugit? Enim, facere voluptatum blanditiis iste doloremque. Officiis!<p>
/* CSS */
.principal { background: red; }
El atributo class="" dentro de HTML5, fué concevido para que trabaje de la mano con CSS3. Vamos a usar mucho este atributo cuando empecemos a crear el diseño de nuestro sitio. Este atributo nos permitirá identificar, de una forma precisa, ciertas etiquetas para posteriormente aplicarles estilos usando CSS3.
En el siguiente ejemplo he aplicado estilos a todos los elementos que contengan la clase .introduccion. Una puntualización, en mi caso evito poner tildes cuando defino las clases para evitar posibles errores. Copia esos códigos y mira el resultado en el navegador.
<!-- HTML --> <h2 class="titulo-h2">Titulo 1</h2> <p class="introduccion">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque rem neque saepe velit fuga natus id vero ipsum debitis possimus repellendus consectetur, fugit? Enim, facere voluptatum blanditiis iste doloremque. Officiis!<p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque rem neque saepe velit fuga natus id vero ipsum debitis possimus repellendus consectetur, fugit? Enim, facere voluptatum blanditiis iste doloremque. Officiis!<p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque rem neque saepe velit fuga natus id vero ipsum debitis possimus repellendus consectetur, fugit? Enim, facere voluptatum blanditiis iste doloremque. Officiis!<p>
/* CSS */
.introduccion {
background: blue;
color: white;
font-style: italic;
}
Ejercicio practico
En este ejercicio, los estilos se están colapsando, es un momento donde la cascada va a tener que funcionar. Hemos creado un selector de tipo etiqueta, este está afectando a todos los párrafos. Pero hemos creado otro selector, en este caso de tipo "class", donde se le aplica otro color de fondo. ¿Cual de estos dos selectores va a ser el triunfador?
/* CSS */
.principal {
background: red;
}
p {
background: red;
}
.introduccion {
background: blue;
color: white;
font-style: italic;
}
Vamos a usar la formula de especificidad de la que os hablé en la clase donde tratamos La cascada en CSS3, ahí podéis encontrar la formula. Si la usamos nos da los siguientes resultados:
- p = 0001= 1
- .introduccion= 0010 = 10
Según el calculo realizado y teniendo en cuenta que no tiene definido el valor!important,.introduccion, sería la ganadora.
Una de las principales características de las clases, es que múltiples etiquetas HTML, pueden contener el mismo nombre de clase. Es muy frecuente usar este tipo de selectores, para mostrar avisos dentro de un sitio web. Cuando trabajemos con CMS´s como WordPress, veremos frecuentemente que es posible definir múltiples clases para una sola etiqueta. y lo vamos a ver en el siguiente ejemplo.
<!-- HTML --> <div class="error especial info"> ERROR: Nombre de usuario erroneo. </div>
/* CSS */
.error {
background: red;
color: white;
text-align: center;
padding: 20px;
}
.especial {
border: 4px solid black;
}
.info {
font-weight: bold;
}
Estas tres clases están afectando a la etiqueta <div> porque están definidas en el atributo class dentro de <div>.
Los selectores de tipo etiqueta se pueden combinar con los de tipo clase, para formar selectores mas específicos.
/* CSS */
div .error {
background: red;
color: white;
text-align: center;
padding: 20px;
}
Finalizando la clase
Creo que ha sido una clase bastante completa y donde hemos aprendido algo que va a ser el día a día de un desarrollo web, el uso de los selectores de clase. Además hemos aprendido a combinarlos con los selectores de etiqueta y de este modo ser más específicos. Con estas combinaciones evitaremos problemas de especificidad, como los que yo he tenido en mis inicios a la hora de aplicar estilos al blog.
No dudes en preguntar si tienes una duda con respecto a este tema, te responderé encantado. Y por supuesto no dudes en dejarme un comentario sobre este tema, si te ha gustado o servido de algo, o si quieres puntualizar o corregir algo. Por favor, tomate un minuto para compartir este articulo, clase , post o como quieras llamarlo. De esta forma ayudas a que esta comunidad de estudio crezca y otras personas interesadas en aprender, puedan acceder a este contenido.
0 Comentarios