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

No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados, como se verá más adelante.

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.

El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:

h1 {
  color: red;
}
 
h2 {
  color: blue;
}
 
p {
  color: black;
}

Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores. En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:

h1 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h2 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:

h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

En las hojas de estilo complejas, es habitual agrupar las propiedades comunes de varios elementos en una única regla CSS y posteriormente definir las propiedades específicas de esos mismos elementos. El siguiente ejemplo establece en primer lugar las propiedades comunes de los títulos de sección (color y tipo de letra) y a continuación, establece el tamaño de letra de cada uno de ellos:

h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
 
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

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.

Selector de clase

Si se considera el siguiente código HTML de ejemplo:






<body>
  <p>Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</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 tipo 

o etiqueta (p) tampoco se puede utilizar porque seleccionaría todos los párrafos. Por 

último, el selector descendente (body 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:






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




A continuación, 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; }



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






Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que 

permiten disponer de una precisión total al seleccionar los elementos. Además, estos 

selectores permiten reutilizar los mismos estilos para varios elementos diferentes. 

A continuación se muestra otro ejemplo de selectores de clase:






.aviso {
  padding: 0.5em;
  border: 1px solid #98be10;
  background: #f6feda;
}
 
.error {
  color: #930;
  font-weight: bold;
}
<span class="error">...</span>
 
<div class="aviso">...</div>



 

El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas 

CSS indicadas por el selector.error. Por su parte, el elemento <div> tiene un atributo 

class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso. 

En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera

de nuevo el ejemplo anterior:





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



¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual 

a destacado? Combinando el selector de tipo y el selector de clase, se obtiene un 

selector mucho más específico:





p.destacado { color: red }



El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que 

dispongan de un atributo class con valor destacado". De la misma forma, el selector

a.destacado solamente selecciona los enlaces cuyo atributo class sea igual 

a destacado. 

De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado,

por lo que todos los diseñadores obvian el símbolo * al escribir un selector de 

clase normal. 

No debe confundirse el selector de clase con los selectores anteriores:






/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }
 
/* Todos los elementos con atributo class="aviso" que estén dentro
   de cualquier elemento de tipo "p" */
p .aviso { ... }
 
/* Todos los elementos "p" de la página y todos los elementos con
   atributo class="aviso" de la página */
p, .aviso { ... }




Por último, es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. 

La sintaxis es similar, pero los diferentes valores del atributo class se separan con 

espacios en blanco. En el siguiente ejemplo:






<p class="especial destacado error">Párrafo de texto...</p>




Al párrafo anterior se le aplican los estilos definidos en las reglas .especial, .destacado 

y .error, por lo que en el siguiente ejemplo, el texto del párrafo se vería de color rojo, 

en negrita y con un tamaño de letra de 15 píxel:






.error { color: red; }
.destacado { font-size: 15px; }
.especial  { font-weight: bold; }
 
<p class="especial destacado error">Párrafo de texto...</p>




Si un elemento dispone de un atributo class con más de un valor, es posible utilizar 

un selector más avanzado:






.error { color: red; }
.error.destacado { color: blue; }
.destacado { font-size: 15px; }
.especial  { font-weight: bold; }
 
<p class="especial destacado error">Párrafo de texto...</p>




En el ejemplo anterior, el color de la letra del texto es azul y no rojo. El motivo es 

que se ha utilizado un selector de clase múltiple .error.destacado, que se interpreta

como "aquellos elementos de la página que dispongan de un atributo class con al 

menos los valores error y destacado".

Fuente de informacion: http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html

http://primerospasoshtml5.blogspot.mx/2012/07/sobre-los-selectores-css.html 

http://www.w3schools.com/cssref/css_selectors.asp