Selectores CSS

Se llama selector a la sintaxis que define a quien se aplicara un grupo de atributos de estilo.

1. Etiquetas

Se puede asignar el estilo a una tipo de etiqueta concreta de HTML, pero hay que tener en cuenta que afectara a todas las que se usen en la pagina. Para ello, en la declaración de estilos escribimos la etiqueta y entre llaves, las propiedades de estilo que deseemos, seguido de dos puntos y el valor seguido de punto y coma.

body { 
   	background: #f0f0f0; 
   	color: #333366; 
}

Podemos aplicar el mismo estilo en un conjunto de etiquetas. Para ello, indicamos las etiquetas seguidas por comas y luego, entre llaves, las propiedades y valores.

h1, p { 
   	color: red; 
}

En este caso se define que los encabezados de nivel 1 y los párrafos, tengan letra roja.

header, nav, footer{ 
   	background-color: #000000; 
   	color: #ffffff; 
	border: 1px solid red;
}

Aqui es importante añadir al selector universal * que selecciona a todos las etiquetas.

2. Indices

Se puede definir un estilo especifico para un solo indicador id, para esto el nombre del indicar se preceder de # y en el elemento se asigna el mismo id. Hay que aclara que a diferencia de la clase este estilo solo se puede aplicar una vez.

#queso {text-align: center;}

3. Clases

Podemos usar una o mas clases, si deseamos crear un estilo específico, para luego aplicarlo a distintos elementos de la página. Las clases en la declaración de estilos se declaran con un punto antes del nombre de la clase.

.miclase{ 
   	color: blue;
}

Para asignar el estilo definido por una clase en un elemento HTML, simplemente se añadir el atributo class a la etiqueta que queremos aplicar dicha clase.

<p class="miclase">Este párrafo tiene el estilo definido en la clase "miclase".</p>

El párrafo anterior se presentaría con color azul. La definición de clases y su uso es sencilla, pero veamos un ejemplo más detallado:

Para la siguiente declaración de estilos:

.inverso { 
   	color: #000000; 
   	background-color: #ffffff; 
}

Se ha definido un fondo negro y el texto blanco para el cuerpo de la página (body), así como las celdas y los párrafos. Luego se ha declarado una clase, de nombre "inverso", con los colores al revés, es decir, fondo blanco y texto negro.

<body>
<p/gt;Hola esto es un parrafo normal</p/gt;
<p class="inverso">Párrafo con los colores invertidos</p/gt;
<table/> 
<tr/gt; 
   	<td class=inverso>INVERSO</td>
   	<td>NORMAL</td>
</tr>
</table>
</body>

Esta página tiene el fondo negro y el texto blanco. El primer párrafo, que es un párrafo normal, sigue esa definición general de estilos, pero el segundo párrafo, al que se ha aplicado la clase "inverso", tiene el fondo blanco y el texto en negro. Por lo que respecta a la tabla, en su primera celda se ha asignado la clase "inverso", por lo que se verá con fondo blanco y color de texto en negro. Mientras que la segunda celda, que no tiene asignada ninguna clase, se presentará como se definió en la regla general.

4. Atributo

Se puede usar el hecho de que una etiqueta contenga un atributo especifico como selector. Para su definicion en CSS el atributo debe ir entre corchetes.

Ejemplo: Selecciona todas los elementos que contengan el atributo Title.

[Title]{color: red;}

Ejemplo: Selecciona cualquier elemento button sin un atributo DISABLED.

button:not([DISABLED]) {color: red;}

5. Atributo y valor

Se puede usar el hecho de que una etiqueta tenga un valor especifico en un atributo. Para este caso se designa entre corchetes el atributo, luego un simbolo y luego un valor. El simbolo puede ser =, ^= (empieza con), $= (termina con), *= (contiene) o |= (diferente).

Ejemplo: Selecciona cualquier elemento cuyo atributo HREF termine en .PDF

[href$=".pdf"] {color: red;}

6. Operadores de pertenencia

Cuando quieres combinar dos o mas selectores.

Operadores
OperadorDescripcion
,AND. Es un y que implica ambos elementos
 Hijo. Se refiere a un hijo directo.
>Descentiente. Se refiere a un descenciente en general.
*Se refiere a todos los elementos.
notNegacion. Invierte la seleccion.

Ejemplo: Selecciona cualquier elemento p que es descendiente de un elemento li que es descendiente de un elemento ol que es hijo de un elemento body.

body > ol > li p {color: red;}

Ejemplo: Selecciona cualquier elemento que no sea un elemento a.

*:not(a) {color: red;}

Se puede usar etiquetas y clases combinadas.

Ejemplo: Selecciona las p que contenga la clase "miclase".

p.miclase {color: red;}

Ejemplo: Selecciona los elementos de la clase "miclase" que sea hijo de un elemento p.

p .miclase {color: red;}

7. Pseudo Clases

Una pseudo clase en cuando analizamos el valor de una propiedad.

Lista de SEUDOCLASES
Pseudo claseDescripcion
:hoverCon el mouse encima. Ojo se puede usar en cuaquier etiqueta.
:focusElemento que contiene el foco.
:linkEnlace no visitado aun.
:activeElemento al cual estas pulsando. Mientras este pulsado
:visitedElace ya visitado.
:First-ChildEl primer hijo.
:nth-Child()El hijo n (numerico) o ODD o EVEN
:Only-ChildEl unico hijo.
:nth-Last-Child()El hijo n antes del ultimo.
:Last-ChildEl ultimo hijo.
:First-of-TypeEl primero de su tipo.
:nth-of-Type()El n del tipo.
:Only-of-TypeEl unico de su tipo.
:nth-Last-of-Type()
:Last-of-TypeEl ultimo de su tipo.
:EmptyEsta vacio.
:RootEs la raiz.
:TargetEs enlace
:chechedselecciona elementos input "marcados"
:disablesselecciona elementos input "desabilitrados"
:invalidselecciona elementos input "invalidos"
:requiredselecciona elementos input "requeridos"
:read-onlyselecciona elementos input "solo lectura"
:read-writeselecciona elementos input sin atributo "solo lectura"
:langSelector por lenguaje. Ej html:lang (es) {font-size: 80%;}

CSS tambien permiten modificar a voluntad la apariencia de los enlaces, usando como selector una pseudo clases especifica, luego el atributo (color, tamañe fuente, subrayado o no) y finalmente el valor a asignar.

Ejemplo: hace que los enlaces por visitar sean de color azul, una vez visitados se pongan de color verde y alponer el mouse encima de color rojo.

A:hover {color: red;}
A:link {color: blue;text-decoration: none;} 
A:active {color: purple;}
A:visited {color: green;} 

El orden de aplicacion debe ser necesariamente el expuesto para que funcione.

Si se les aplica la propiedad text-decoration, ajustado al valor none (ninguno), hace que los enlaces no estén subrayados.

Ejemplo: Hace que los enlaces visitados sean de color fucsia y no estén subrayados.

A:visited {color: fuchsia; text-decoration: none}

8 Pseudo elementos

Los pseudo elementos permiten seleccionar una seccion del DOM sin tener en cuanta una etiqueta en especial, sino mas bien de su posicion dentro del DOM.

Pseudo elementoDescripcion
::First-linePrimera linea
::First-letterPrimera letra
::BeforeAntes
::AfterDespues

Normalmnet estos dos ultimos asociados a un Generator Content.

Ejemplo: En el ejemplo se esta introduciendo un nbsp (codigo unicode 00A0) antes del div.

div::before {
	content: "\00A0";
	display: block;
	width: 0;
	heigth: 0;
	border-width: 10px 20px 10px 0;
	border-style: solid;
	border-color: transparent;
}

9. Identificar el navegador

Es posible que algunas implementaciones modernas no funcionen igual en todos los navegadores por lo que debes especificar una instruccion para cada navegador en particulor.

IdentificadorDescripcion
-moz-Firefox
-webkit-Chrome o Safari
-o-Opera
#grad {
    background: red; /* Para navegadores que no soportan gradiente */
    background: -webkit-linear-gradient(red, yellow); /* Para Safari 5.1 a 6.0 */
    background: -o-linear-gradient(red, yellow); /* Para Opera 11.1 a 12.0 */
    background: -moz-linear-gradient(red, yellow); /* Para Firefox 3.6 a 15 */
    background: linear-gradient(red, yellow); /* Sintexis estanadar */
}

10. Mezclando los tipo de selector

Como se ha visto anteriormente, existen muchos selectrores para aplicar estilos en cascada.

Ejemplo: Selecciona cualquier elemento h2 que no es un primer hijo de su tipo y que no es un último hijo de su tipo que es hijo de un elemento body.

body > h2:not(:first-of-type):not(:last-of-type) {color: red;}

Ejemplo: Selecciona cualquier elemento p sin un atributo class que contiene la palabra section.

p:not(.section) {color: red;}