Juglar

Un selector es la parte de un estilo CSS donde se indica sobre qué parte del documento HTML se debe aplicar el estilo. Y su declaración muestra qué estilo queremos aplicarle, que se compone de atributos y sus correspondientes valores:

selector { atributo: valor; }

Un elemento padre es una etiqueta HTML que contiene otras etiquetas:

<div><strong>Párrafo</strong></div>

Aquí <div> es el padre y <strong> el hijo.

* Selectores: Hacen referencia a etiquetas del documento HTML.

div { font-size: 18px; }

Indica que todos los elementos <div> del documento HTML mostrarán tamaño de letra a 18px.

* Selectores Descendientes: Afectaría a todos los descendientes (hijos, nietos…) de un padre:

div span{ font-size: 18px; }

Afecta a todos los span que estén dentro de un elemento div.

* Selectores Hijo: Únicamente se aplica a los hijos de un padre, no a nietos y posteriores descendientes.

div > span { font-size: 18px; }

* Selectores Hermano Adyacentes: Se aplica a hermanos.

h5 + h6 { font-size: 18px; }

Afecta a h6 pero solo cuando está inmediatamente después de un h5, o cuando h5 y h6 sean hijos del mismo padre.

* Selectores de Atributos: Se aplican a los atributos de etiquetas de imágenes o enlaces.

img[widht] { border: 5px dotted #f00 }

Afecta a todos los elementos img de nuestro documento que tenga el atributo width.

img[widht="80"] { border: 5px dotted #f00 }

Afecta a las etiquetas img que tengan el atributo width con un valor de 80

img[alt~="gato"] { border: 5px dotted #f00 }

Afecta a las img que tengan un atributo alt cuyo valor contenga la palabra indicada.

p[title^="Pri"] {color:red;}

Se aplica a los párrafos cuyo atributo title comienza por “Pri”.

p[title$="arrafo"] {color:green;}

Se aplica a los párrafos cuyo atributo title termina en “arrafo”.

p[title*="ercer"] {color:blue;}

Se aplica a los párrafos cuyo atributo title contiene “ercer”.

* Selectores de Clase: Se aplica a elementos del documento mediante el atributo class. Utilizan nombres inventados que no corresponden con etiquetas HTML. Se pone un punto (.) antes del selector.

En el CSS:

.tituloblog { color:#F00; }

En el HTML:

<div class="tituloblog">El Gran Blog</div>

* Selectores de Id: Tiene el mismo sentido que el selector de clase, pero sólo lo vamos a utlizar una vez en el documento. Se pone una almohadilla (#) antes del selector.

En el CSS:

#pieblog { color:#F00; }

En el HTML:

<div id="pieblog">Agradecimientos a todos</div>

Nota: Internet Explorer tiene problemas para leer los selectores hijo o los selectores de atributo.

Más tutoriales: Caótico Neutral: Selectores en CSS

Telomereces.com