No has iniciado sesión
Conectar al sistema | Registrar usuario
Cursos Cuestionarios Curso de CSS Capítulo
 
20 votos
Selectores CSS
 
Un selector es la parte de un estilo CSS donde se indica sobre que parte del documento (X)HTML se debe aplicar el estilo, resumiendo, se podría decir que es el nombre del estilo, ejemplo:
 
000 
 div { font-size: 18px; } 
 

En la anterior regla el selector seria div y para ser un poco mas técnicos, font-size sería el atributo o propiedad y 18px el valor, a su vez estos dos últimos junto con las corchetas de inicio y cierre serían la declaración (Recuerdalo a lo largo de este artículo).

Tras esta pequeña info... Disponemos de diferentes tipos de selectores que como es obvio actúan de forma diferente: Selectores, Selectores Descendientes, Selectores Hermano Adyacentes, Selectores de Atributos, Selectores de clases, Selectores de Id y Selectores Hijo... Explicamos cada uno y ponemos un ejemplo.

Pero antes de empezar y para los usuarios mas novatos, sería conveniente entender el concepto de Elemento Padre y Elemento Hijo si ya lo conoces saltate este párrafo. Cuando hablo de elemento me refiero a una etiqueta (X)HTML como pueda ser span o div por lo que si le buscas la lógica el padre es la etiqueta principal que dentro de ella tiene otras etiquetas, por ejemplo body siempre será un padre y en un código como el siguiente:
 
000 
<div><strong>Rapidamente sucedio lo inesperado...<strong></div>
 

El padre sería div y strong el hijo puesto que strong está dentro de div. A su vez un hijo puede tener otros hijos y así de forma jerárquica.

Selectores
Simplemente selectores, es lo más básico y que ya se ha insinuado al inicio del artículo. Los selectores hacen referencia a etiquetas de nuestro documento (X)HTML tal y como se ha mostrado en el primero ejemplo de selector:
 
000 
 div { font-size: 18px; } 
 

Esto indicaría que todos los elementos div de nuestro documento (X)HTML utilizarían el estilo marcado por este código (tamaño de letra a 18px).

Selectores Descendientes
Este selector afectaría a una etiqueta hijo de un padre de forma descendiente:
 
000 
div span { font-size: 18px; }
 

Por lo que todos los elementos span de nuestro documento (X)HTML que estén dentro de un elemento div se verán afectados por esta regla. Vemos un ejemplo:
 
000 
001 
002 
003 
004 
005 
006 
007 
<head><style type="text/css"> 
div span { font-size: 18px; } 
</style></head> 
 
<body> 
<span>Rapidamente sucedio lo inesperado... </span> 
<div><span>Y el gato se subio por la montaña</span></div> 
</body>
 

Observarás como en el resultado se ven dos frases, una con tamaño normal y otra (la segunda) con un tamaño de 18px

Selectores hermano Adyacentes
Quizá sea el tipo de selector menos utilizando pero vamos a verlo... A diferencia de otros selectores este no se aplica ni a padres ni a hijos sino a hermanos.
 
000 
h5 + h6 { font-size: 18px; } 
 

Esta regla afectaría únicamente a h6 pero solo cuando este se encontrara inmediatamente después de un h5 o cuando h5 y h6 sean hijos del mismo padre. Vemos un ejemplo:
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
<head> <style type="text/css"> 
h5 + h6 {font-size:18px} 
</style> </head> 
 
<body> 
<h5>Rapidamente sucedio lo inesperado...</h5> 
<h6>Y el gato se subio por la montaña</h6> 
</body> 
 

Efectivamente h6 aparecerá con letra de 18 pixeles pero si entre h5 y h6 colocamos algún otro elemento como un párrafo p el selector hermano "adyacente" dejará de aplicarse a h6.
 

Páginas: 1 2

 
Anterior y siguiente
Sintaxis CSS
 
¿? Resolver dudas
Si tienes problemas o dudas con el contenido del artículo no dudes a preguntar en los foros de CSS de Programación Web indicando el artículo al que te refieres.
 
Comentarios
25/11/04 Comentario 416
Excelente manera de explicar. Sigue con lo que falta.
26/11/04 Complemento
Pues ahora que lo veo... Si que me he dejado la descripcion del Selector Hijo y algun que otro detalle...

Selectores Hijo
Son parecidos a los selectores descendientes pero con una importante diferentecia. El Selector descendiente se aplica de padres a hijos y nietos y biznietos... mientras que el selector hijo únicamente se aplica a los hijos de un padre. Vemos un Ejemplos.
 
000 
001 
002 
003 
004 
005 
006 
007 
008 
009 
010 
<head><style type="text/css"> 
div > span { font-size: 18px; } 
</style></head> 
 
<body> 
 
<div><span>Rapidamente sucedio lo inesperado... </span></div> 
 
<div><p><span>Y el gato se subio por la montaña</span></p></div> 
 
</body>
 

En la anterior regla se aplicará el estilo css a la primera frase puesto que es la única que tiene un hijo span dentro de un div. La segunda frase tiene un hijo p y un nieto span por lo que en este caso no se aplicaría el Selector Hijo.

Si al selector hijo le quitaramos el símbolo > se convertiría en un selector descendiente y se aplicaría en las dos frases del ejemplo.

Algunos detalles
Viendo las especificacion de CSS1 que publicó el W3C en el 96 únicamente se habla de Selectores Contextuales... y dentro de los selectores contextuales se muestran ejemplos de selectores descendientes, de clase y de id, pero ni rastro de selectores hermano adyacenteces, hijos o de atributo, por lo que me lleva a la conclusión de que los selectores tal y como los conocemos hoy fueron añadidos en la segunda revisión de CSS del 98.

A día de hoy el navegador mas usado del mundo tiene problemas para leer ciertos selectores como los Selectores hijo o los selectores de atributo con valor en el atributo... hablo de Internet Explorer en su Version 6 SP2 y este es solo uno de los innurables problemas de este navegador con CSS.

Los navegadores con motor Gecko y opera aceptan creo casi todos los selectores CSS y digo "casi" por no arriesgarme a decir solo "todos".

Bueno... Si van surgiendo mas cosas se comentarán, Salu2
20/06/08 Comentario 858
buenisimo lo de selectores!!
02/06/09 Comentario 1228
Excelente amigo pero oye tienes una equivocacionel tipo de selector id y el de clase les pusiste el mismo nombre, aunque abajo aclareste cual era de cual :P.


Salu2
17/01/10 Compatibilidad con IE 7
La instrucción
img[alt~="gato"] {border: 5px solid #000;}

No es compatible con IE 7.0

En Firefox 3.0.16 funciona de maravilla.
21/02/12 Comentario 1818
Hola solo para decirte que tienes un error ortografico en la palabra WIDTH ya que tu lo tienes como WIDHT :)
 
Redes Sociales
Programación Webon

Compartir en Google Plus