Selector de tipo, de clase, descendente y de identificador / Programación CSS
Existen cuatro selectores básicos fundamentales en CSS:
- Selector de tipo
- Selector de clase
- Selector descendente
- Selector de identificador
Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p {
...
}
< y >) correspondiente a los elementos que se quieren seleccionar.Este selector hace referencia a todos los elementos o etiquetas de un mismo tipo. Para seleccionar una etiqueta, hacemos referencia a esa etiqueta en nuestro código CSS.
El selector de tipo es muy poco específico: se aplicará a todas las etiquetas del tipo elegido que se incluyan en el código CSS.
2) Selector de clase: es una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página, consiste en utilizar el atributo
class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar:<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et est adipiscing accumsan...</p>
<p>Class aptent taciti sociosqu ad litora...</p>
</body>
destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo:.destacado { color: red; }
.destacado se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a destacado", por lo que solamente el primer párrafo cumple esa condición.Este tipo de selectores se llaman selectores de clase y son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo
class:<body>
<p class="destacado">Lorem ipsum dolor sit amet...</p>
<p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
<p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
En CSS, los nombres de las clases vienen precedidos por el carácter “.”; es imprescindible que recuerdes incluir este carácter.
El atributo “class” permite múltiples valores separados por espacio, de forma que podemos aplicar multitud de clases a una misma etiqueta. Esto favorece la reutilización de reglas, en lugar de tener repetir ciertas reglas una y otra vez.
Los selectores se pueden combinar entre sí.
3)Selector descendente:Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.
El selector del siguiente ejemplo selecciona todos los elementos
<span> de la página que se encuentren dentro de un elemento <p>:p span { color: red; }
Si el código HTML de la página es el siguiente:
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
El selector
p span selecciona tanto texto1 como texto2. El motivo es que en el selector descendente, un elemento no tiene que ser descendiente directo del otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el que se encuentre.
Al resto de elementos
<span> de la página que no están dentro de un elemento <p>, no se les aplica la regla CSS anterior.
Los selectores descendentes permiten aumentar la precisión del selector de tipo o etiqueta. Así, utilizando el selector descendente es posible aplicar diferentes estilos a los elementos del mismo tipo. El siguiente ejemplo amplía el anterior y muestra de color azul todo el texto de los
<span> contenidos dentro de un <h1>:p span { color: red; }
h1 span { color: blue; }
Con las reglas CSS anteriores:
- Los elementos
<span>que se encuentran dentro de un elemento<p>se muestran de color rojo. - Los elementos
<span>que se encuentran dentro de un elemento<h1>se muestran de color azul. - El resto de elementos
<span>de la página, se muestran con el color por defecto aplicado por el navegador.
La sintaxis formal del selector descendente se muestra a continuación:
selector1 selector2 selector3 ... selectorN
Los selectores descendentes siempre están formados por dos o más selectores separados entre sí por espacios en blanco. El último selector indica el elemento sobre el que se aplican los estilos y todos los selectores anteriores indican el lugar en el que se debe encontrar ese elemento.
En el siguiente ejemplo, el selector descendente se compone de cuatro selectores:
p a span em { text-decoration: underline; }
Los estilos de la regla anterior se aplican a los elementos de tipo
<em> que se encuentren dentro de elementos de tipo <span>, que a su vez se encuentren dentro de elementos de tipo <a> que se encuentren dentro de elementos de tipo <p>.
No debe confundirse el selector descendente con la combinación de selectores:
/* El estilo se aplica a todos los elementos "p", "a", "span" y "em" */
p, a, span, em { text-decoration: underline; }
/* El estilo se aplica solo a los elementos "em" que se
encuentran dentro de "p a span" */
p a span em { text-decoration: underline; }
Se puede restringir el alcance del selector descendente combinándolo con el selector universal. El siguiente ejemplo, muestra los dos enlaces de color rojo:
p a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo:
p * a { color: red; }
<p><a href="#">Enlace</a></p>
<p><span><a href="#">Enlace</a></span></p>
La razón es que el selector
p * a se interpreta como todos los elementos de tipo <a> que se encuentren dentro de cualquier elemento que, a su vez, se encuentre dentro de un elemento de tipo <p>. Como el primer elemento <a> se encuentra directamente bajo un elemento <p>, no se cumple la condición del selector p * a.3)Selector de identificador: Se diferencia del selector de clase en dos aspectos fundamentales:
Primero, el carácter inicial
en el código CSS es “#”, en lugar del “.”.
Para poder anidar selectores éstos se especifican uno tras otro seguidos de espacios en blanco, siempre empezando por el elemento con menor nivel de anidamiento en el documento HTML.
La reutilización y la reducción de código son primordiales para asegurar un fácil mantenimiento del código.
Para aplicar el mismo estilo a diferentes reglas no es necesario repetir código, puedes separar las reglas por comas y especificar el estilo una sola vez.
Los dos selectores se separan con una coma.
Por supuesto, puedes agrupar reglas de cualquier tipo de selector.
Los dos selectores se separan con una coma.
Por supuesto, puedes agrupar reglas de cualquier tipo de selector.
Fuentes: Activate, Google España
Comentarios
Publicar un comentario