Tecnologías de la Información y la Comunicación · 2º Bachillerato
Curso 2016/2017·  

Selectores CSS

Utilizando solamente los cinco selectores básicos de CSS 2.1 (universal, de tipo, descendente, de clase y de id) es posible diseñar cualquier página web. No obstante, los selectores avanzados de CSS 2.1 y CSS3 permiten simplificar las reglas CSS y también el código HTML.

Desafortunadamente, los navegadores obsoletos como Internet Explorer 6 y sus versiones anteriores no soportan este tipo de selectores avanzados, por lo que su uso no era común hasta hace poco tiempo. Hoy en día, todos los navegadores más utilizados soportan los selectores avanzados de CSS 2.1 y la mayoría también soportan un gran número de selectores CSS3.

La potencia de CSS radica en la capacidad de seleccionar sólo lo que queremos, de multitud de maneras.

Selector universal

Se utiliza para seleccionar todos los elementos de la página. El selector universal se indica mediante un asterisco (*).

Ejemplo


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

El ejemplo anterior elimina el margen y el relleno de todos los elementos HTML, además provoca que el relleno(padding) y el borde (border) se consideren "hacia adentro" de la caja de cualquier elemento. Por último indica que cualquier propiedad que soporte transición se realice con suavidad.

Selector de etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar. Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores, para ello se incluyen todos los selectores separados por una coma (,).

Ejemplo


h2 {
  background-color: #333333;
  color: #FFFFFF;
}

El ejemplo anterior selecciona todos los titulares h2 de la página colocándoles un fondo casi negro con letra blanca:

Selector descendiente

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. 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. 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.

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.

Ejemplo


p span strong {
  text-decoration: underline;
  color: #FFFF00;
}

Los estilos de la regla anterior se aplican a los elementos de tipo strong que se encuentren dentro de elementos de tipo span, que a su vez se encuentren dentro de elementos de tipo p.

Selector de clase

Observa el siguiente código:


<body>
<main>
  <p>Lorem ipsum dolor sit.</p>
  <p>Lorem ipsum dolor.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</main>
</body>

¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal (*) no se puede utilizar porque selecciona todos los elementos de la página. El selector de  etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por último, el selector descendente (main p) tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.

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. Para que el navegador no confunda este selector con otros tipos de selectores, los selectores de clase deben comenzar por un punto (.) en el código CSS.


<body>
<main>
  <p class="rojo">Lorem ipsum dolor sit.</p>
  <p>Lorem ipsum dolor.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</main>
</body>

Ejemplo


.rojo { color: red; }

El selector .rojo se interpreta como "cualquier elemento de la página cuyo atributo class sea igual a rojo", por lo que solamente el primer párrafo cumple esa condición.

Etiquetas: Teoría, CSS3

Imprimir

En línea...

Hay 10 invitados y ningún miembro en línea

Prácticas...

aulav

Visitas...

0.png7.png0.png5.png2.png
Hoy ........12
Ayer .......30
Mes ........294

Jueves, 19 Octubre 2017