Me ha parecido raro no ver un tutorial específico para esto, así que voy a hablar de algunos selectores CSS, de CSS3...
Para empezar, los selectores CSS seleccionan (¿De veras?) unos objetos determinados.
Antes, lo más basico son los nombres de etiqueta, clase e id.
Etiqueta:Se escribe el nombre de la etiqueta HTML que será afectada
div {
// esto afecta a todos los div
}
Se puede usar el comodín * para referirse a cualquier tipo de elemento.
Clase:Se escribe el nombre de la clase prececido de un punto, esto afectará a todo elemento con class="nombre"
.miclase {
// esto afectaria por ejemplo a <a class="miclase">, <p class="miclase"> etc
}
ID:Se escribe el nombre de la ID precedido de una almohadilla (#), afectará al elemento con id="LAID"
#hola {
// esto afecta a <a id="hola" o <p id="hola">, recuerda que la ID debe ser UNICA
Se pueden "anidar" para acceder a elementos dentro de los mismos, así:
#hola div.pepe a {
// afecta a cualquier A dentro de un div con la clase "pepe" dentro del elemento con id "hola"
}
Esto no es del todo exacto, pues algo así:
<div id="hola">
<div class="pepe">
<span><a>hola</a></span>
</div>
</div>
El "A" se vería afectado por el CSS, pero a partir de CSS3 (si no me equivoco) se puede hacer que tenga que ser un hijo inmediato, justo debajo:
#hola > div.pepe > a {
blabla
}
Esto no afectaría al codigo anterior, ya que div.pepe si es un hijo directo de #hola, pero el A no lo es, sin embargo sí afectaria al A si fuera así:
<div id="hola">
<div class="pepe">
<a><span>hola</span></a>
</div>
</div>
Esto es lo más basico, a partir de lo cual parten los selectores, los más básicos son los de efectos como son hover y active; están disponibles para cualquier elemento a partir de CSS3, y solo para los links (a) antes de este.
Hover:Se "activa" al pasar el mouse por encima.
#hola:hover {
// Esto pasa al pasar el mouse por encima del div id="hola"
}
Active:Se activa al hacer click, es muy útil para hacer botones sobre todo
button:active {
// Esto pasa al hacer click encima de los "button" (es una etiqueta HTML)
}
Focus y blur:Se activa cuando recibe o pierde el foco, respectivamente.
Otros selectores muy buenos hacen referencia a las etiquetas del elemento:
[atributo]:Afecta a los elementos que tengan el atributo, por ejemplo:
[hola] {
// cualquier elemento con atributo hola (<a hola="h">, <p hola="biba">)
}
a[title] {
// links con titulo
}
[atributo=valor], [atributo|=valor], [atributo$=valor], [atributo~=valor]:Hacen referencia a etiquetas cuyo atributo "atributo" sea igual a valor, comience por valor, acabe en valor, y contenga valor, respectivamente.
input[type=button] {
// Hace referencia a inputs que sean botones, UTILÍSIMO!
}
a[href|=/privado] {
// Hace referencia a links que lleven a /privado
}
a[href$=html] {
// Hace referencia a links que llevan a archivos HTML
}
a[smile~=sonrisa pepe] {
// Hae refenia a links cuyo atributo smile contenga sonrisa o pepe
}
Selectores X-child:
first-child y last-child:Seleccionan el primer y último elemento X, respectivamente.
div:first-child {
// primer div
}
ul.lista li:last-child {
// último elemento li de la lista (ul) con clase "lista"
}
nth-child(expresion):Estos selectores son MUY utiles. Seleccionan los elementos que cumplan cierta expresión, la expresión puede ser un número entero, odd (impar) o even (par), o una expresión compleja
- número entero: selecciona el elemento que se encuentre en esa posición.
div span:nth-child(3) {
// selecciona el tercer hijo span
}
- odd o even: seleccionan los elementos impares o pares respectivamente.
a > :nth-child(odd) {
// selecciona los elementos impares hijos directos de a
}
div:nth-child(even) {
// selecciona los div pares.
- expresión compleja: estas expresiones permiten seleccionar los elementos en cierto orden.
:nth-child(2n) {
// selecciona el 2º hijo, el 4º, el 6º...
}
:nth-child(5n) {
// selecciona el 5º hijo, 10º...
}
:nth-child(3n+1) {
// selecciona el 3º, 6º, 9º... y además el primero.
}
X-of-type:Son como los selectores child, existen first-of-type, last-of-type y nth-of-type(expresion). La única diferencia respecto a los anteriores es que a estos no les basta cualquier elemento hijo, han de ser del tipo concreto de elemento, es decir:
div > :first-child {
color: #F00;
}
div > span:first-of-type {
background: #F00;
}
<div><a>este link tiene la letra roja</a><a>este no tiene nada especial</a><span>este span tiene fondo rojo</span><span>este span es normal</span>
Adyacente:El selector adyacente selecciona un elemento que esté justo en la siguiente posición que el otro.
div + span {
// span que esté despues de un div
}
// ejemplo
span + a {
color: #F00;
}
<span>hola</span><a>este link es rojo</a>
<span>hola</span><b>estoy en negrita</b><a>este link NO es rojo</a>
Hermano:El selector hermano selecciona todos los elementos hermanos, independientemente de que estén al lado o no.
span ~ a {
// todos los a hermanos de un span, ejemplo:
color: #F00;
}
<div>
<span>soy un span</span>
<a>soy rojo</a>
<h1><a>yo no soy rojo</a></h1>
<b>yo estoy en negrita</b>
<a>yo tambien soy rojo</a>
</div>
Otros:
before y afterPermiten insertar algo antes y/o despues de un elemento
span.pregunta:before {
content: '¿';
}
// insertaria una interrogación antes de cualquier span .pregunta
span:after, p:after {
content: '.';
}
// pone un punto tras cualquier span o p (para vagos)
Esto es todo de momento, más adelante pondré más.
Saludos.
