SELECTORES
Selector Universal
Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):
* { margin: 0; padding: 0; }
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
Selector de Tipo o Etiqueta
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 { ... }
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.
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; }
Selector de Clase
se crea en el archivo CSS una nueva regla llamada 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; }
Selectores de ID
La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:
#destacado { color: red; }
Combinación de Selectores Básicos
CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. A continuación se muestran algunos ejemplos habituales de combinación de selectores.
.aviso .especial { ... }
El anterior selector solamente selecciona aquellos elementos con un class="especial" que se encuentren dentro de cualquier elemento con un class="aviso". Si se modifica el anterior selector:
div.aviso span.especial { ... }
Ahora, el selector solamente selecciona aquellos elementos de tipo span con un atributo class="especial" que estén dentro de cualquier elemento de tipo que tenga un atributo class="aviso". La combinación de selectores puede llegar a ser todo lo compleja
que sea necesario:
ul#menuPrincipal li.destacado a#inicio { ... }
