CSSSelectors

Harold Maduro

Selectors

• Universal Selector

• Type Selector

• Descendant Selector

• Child Selector

• Adjacent Sibling Selector

• Class Selector

• ID Selector

• Otros

Universal selector

* { color: red; }

Selecciona todos los elementos en el documento. Si no existe una regla establecida para un elemento en específico; entonces se le aplica la regla del Universal Selector.

Universal selector

* { color: red; }<div>

<p>Soy un párrafo...</p>

<ul>

<li>Soda</li>

<li>Jugo</li>

<p>Soy otro párrafo</p>

</ul>

<p>Último párrafo.</p>

</div> .

Selecciona a todos los elementos del documento y le aplica el color rojo.

No importa qué elemento sea.

Type selector

p { color: red; }

Selecciona un elemento por su nombre en el documento.

Cada instancia del elemento es seleccionada.

Type selector

li { color: red; }

<div>

<p>Soy un párrafo...</p>

<ul>

<li>Soda</li>

<li>Jugo</li>

<p>Soy otro párrafo</p>

</ul>

<p>Último párrafo.</p>

<li>Un ejemplo fuera de UL</li>

</div> .

Sólo selecciona a todos los LI que se encuentren en el documento para aplicarle la regla.

Descendant selector

body h2 { color: red; }

p strong { color: red; }

div ul li a { color: red; }

Permite seleccionar a un elemento basado en su estatus como un descendiente de otro elemento. El elemento seleccionado puede ser un hijo, nieto o tatara - nieto (etc....) de su ancestro.

Descendant selector

La mayor parte del verdadero poder del CSS viene de la capacidad de seleccionar elementos utilizando sus relaciones de padre - hijo (parent - child) o ancestro - descendiente (ancestor - descendant).

Basándonos en la jerarquía de los elementos, cualquier elemento dentro del documento puede ser padre o hijo de otro elemento.

Descendant selector

Tomen en cuenta que los elementos hijos o descendientes van a heredar las propiedades o reglas que les apliquemos a sus ancestros.

body { font-family: verdana; }

Todos los elementos dentro de body, no importa que estén dentro de otros elementos, van a heredar el tipo de letra Verdana.

Child selector

div > p { color: red; }

Esto permite seleccionar a un elemento que es un hijo (o descendiente directo) de otro elemento. Es más restrictivo que el Descendant Selector, ya que sólo escoge a los hijos.

* IE 6.0 ignora este selector

Child selector<div>

<p>Soy un párrafo...</p>

<ul>

<li>Soda</li>

<li>Jugo</li>

<p>Soy otro párrafo</p>

</ul>

<p>Último párrafo.</p>

</div> .

div > p { color: red; }

Esta regla sólo seleccionaría a los párrafos (P) que son exactamente hijos directos del DIV.

El párrafo que está dentro del UL es un nieto o descendiente del DIV, por lo que no será seleccionado.

Adjacent sibling selector

h1 + p { margin-top: 0; }

h2 + p { color: red; }

Este nos permite escoger al siguiente hermano de un elemento; o mejor dicho, podemos escoger al elemento que sigue inmediatamente después de otro elemento y comparten el mismo padre.

* IE 6.0 ignora este selector

Adjacent sibling selector

<div>

<h1>Mi título</h1>

<p>Primer párrafo.</p>

<p>Segundo párrafo.</p>

<p>Tercer párrafo.</p>

</div> .

h1 + p { color: red; }

Esta regla sólo seleccionaría al párrafo que viene exactamente después de un H1.

Ignorará a los otros párrafos ya que no vienen exactamente después del H1.

Class selector

A pesar de que podemos utilizar los type selectors para seleccionar TODAS las instancias de un elemento en la página; con el class selector podemos seleccionar cualquier elemento en el HTML que contenga una clase específica; independientemente de su posición en la estructura del documento.

Class selectorSe pueden utilizar clases, las cuales son creadas por nosotros; para seleccionar ciertos elementos en la página.

El nombre de la clase, debe estar precedido por un punto (.).

El beneficio de las clases es que se le pueden aplicar a varios elementos en una página, independientemente del tipo de elemento.

Class selector.nota { color: red; }

<div>

<h2 class=”nota”>Título</h2>

<p class=”nota”>El párrafo.</p>

<ul>

<li class=”nota”>Soda</li>

<li>Jugo</li>

<p>Soy otro párrafo</p>

</ul>

<p>Último párrafo.</p>

</div> .

Selecciona a todos los elementos que tengan el class de nota.

No importa que tipo de elemento sea; ni en qué nivel de la jerarquía se encuentre.

Class selector

p.nota { color: red; }

Más específicos

Sólo se le aplica a los párrafos (P) con el class de nota.

Class selectorp.nota { color: red; }

<div>

<h2 class=”nota”>Título</h2>

<p class=”nota”>El párrafo.</p>

<ul>

<li class=”nota”>Soda</li>

<li>Jugo</li>

<p>Soy otro párrafo</p>

</ul>

<p>Último párrafo.</p>

</div> .

Sólo se le aplica a los párrafos que tengan el class de nota.

Si hay otros elementos que también tienen class de nota; pero no son párrafos (P), no se le aplica la regla.

Class selector

.nota { font-weight: bold; }

.alerta { color: red; }

Podemos aplicarle varios classes a un mismo elemento

<p class=”nota alerta”>ATENCION</p>

Class selector

.nota.alerta { color: red; }

Podemos usar varias clases encadenadas

<p class=”nota alerta”>ATENCION</p>

ID selectorLos IDs funcionan de manera muy parecida a las clases, con la diferencia que un ID se pueden aplicar sólo una vez en nuestro documento.

Sólo puede haber un elemento en toda la página con el nombre de ID que especifiquemos, de la misma manera que sólo puede haber una persona en todo el país con su número de cédula.

El nombre del ID va precedido por un símbolo numeral (#).

ID selector

#header { color: red; }

<div id=”header”> BOOT </div>

Otros selectors

Simple Attribute Selector

elemento[atributo]

a[title] { color: green}

Selecciona a todos los A que tienen el atributo title

Otros selectors

Exact Attribute Selector

elemento[atributo="valor"]

a[title="Casa"]

Selecciona a todos los A que tienen el atributo title y que sea igual a "casa"

Otros selectors

Partial Attribute Selector

elemento[atributo="valor"]

a[title~="Casa"]

Selecciona a todos los A que tienen el atributo title y que dentro de su valor tengan "casa"

Otros selectors

Language Attribute Selector

elemento[lang|="es"]

html[lang|="es"]

Selecciona al elemento HTML cuyo lenguaje sea "es" o Español.

Otros selectors

:active

:after

:before

:first-child

:first-letter

:first-line

Pseudo Classes y Pseudo Elements

:focus

:hover

:lang

:link

:visited

Pseudo Classes

a { color: blue; }

a:link { color: blue; }

a:visited { color: purple; }

a:hover { color: red; }

a:active { color: yellow; }

Con links

Pseudo Classes

input { background-color: white;}

input:hover { background-color: gray;}

input:focus { background-color: yellow;}

Con Forms

Grouping Selectors

Cuando varios elementos en el HTML van a compartir las mimas declaraciones (color, tipografía, márgenes, etc), se puede utilizar más de un selector para aplicarles a todo la misma declaración.

Grouping Selectors

h1, h2, h3, p { color: red; }

Grouping SelectorsSe debe especificar cada selector complétamente#content p, ul { color:

red; }

Debe ser así:#content p, #content ul { color: red; }

Grouping SelectorsNo se debe terminar el grupo con una coma. Esto es un error que causa al browser ignorar la regla en su totalidad.h1, p, ul, { color:

red; }

Debe ser así:h1, p, ul { color: red; }

Bibliografía

CSS: The Definitive Guide

Amazon: http://tinyurl.com/5hs7jf

Eric Meyer