Lenguajes > CSS
Selectores CSS
westwest:
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
--- Código: ---div {
// esto afecta a todos los div
}
--- Fin del código ---
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"
--- Código: ---.miclase {
// esto afectaria por ejemplo a <a class="miclase">, <p class="miclase"> etc
}
--- Fin del código ---
ID:
Se escribe el nombre de la ID precedido de una almohadilla (#), afectará al elemento con id="LAID"
--- Código: ---#hola {
// esto afecta a <a id="hola" o <p id="hola">, recuerda que la ID debe ser UNICA
--- Fin del código ---
Se pueden "anidar" para acceder a elementos dentro de los mismos, así:
--- Código: ---#hola div.pepe a {
// afecta a cualquier A dentro de un div con la clase "pepe" dentro del elemento con id "hola"
}
--- Fin del código ---
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:
--- Código: ---#hola > div.pepe > a {
blabla
}
--- Fin del código ---
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.
--- Código: ---#hola:hover {
// Esto pasa al pasar el mouse por encima del div id="hola"
}
--- Fin del código ---
Active:
Se activa al hacer click, es muy útil para hacer botones sobre todo
--- Código: ---button:active {
// Esto pasa al hacer click encima de los "button" (es una etiqueta HTML)
}
--- Fin del código ---
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:
--- Código: ---[hola] {
// cualquier elemento con atributo hola (<a hola="h">, <p hola="biba">)
}
a[title] {
// links con titulo
}
--- Fin del código ---
[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.
--- Código: ---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
}
--- Fin del código ---
Selectores X-child:
first-child y last-child:
Seleccionan el primer y último elemento X, respectivamente.
--- Código: ---div:first-child {
// primer div
}
ul.lista li:last-child {
// último elemento li de la lista (ul) con clase "lista"
}
--- Fin del código ---
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.
--- Código: ---div span:nth-child(3) {
// selecciona el tercer hijo span
}
--- Fin del código ---
- odd o even: seleccionan los elementos impares o pares respectivamente.
--- Código: ---a > :nth-child(odd) {
// selecciona los elementos impares hijos directos de a
}
div:nth-child(even) {
// selecciona los div pares.
--- Fin del código ---
- expresión compleja: estas expresiones permiten seleccionar los elementos en cierto orden.
--- Código: ---: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.
}
--- Fin del código ---
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:
--- Código: ---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>
--- Fin del código ---
Adyacente:
El selector adyacente selecciona un elemento que esté justo en la siguiente posición que el otro.
--- Código: ---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>
--- Fin del código ---
Hermano:
El selector hermano selecciona todos los elementos hermanos, independientemente de que estén al lado o no.
--- Código: ---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>
--- Fin del código ---
Otros:
before y after
Permiten insertar algo antes y/o despues de un elemento
--- Código: ---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)
--- Fin del código ---
Esto es todo de momento, más adelante pondré más.
Saludos.
Warlox:
¡Muy bien explicado West!
He aprendido muchísimas cosas del CSS mediante este tutorial, el cual me ha parecido magnífico. Voy a fijar el tema para que esté siempre a la vista de todos ;)
Saludos ^^
westwest:
--- Cita de: Kevin Wronski en 12 de Julio de 2010, 23:11:08 pm ---¡Muy bien explicado West!
He aprendido muchísimas cosas del CSS mediante este tutorial, el cual me ha parecido magnífico. Voy a fijar el tema para que esté siempre a la vista de todos ;)
Saludos ^^
--- Fin de la cita ---
De nada y gracias por fijarlo ^^
Siquillote:
¡Genial west! Enseguida te llevas un karma por arte mia :D.
Gracias a este tutorial he aprendido algo mas.
nmartin021:
Muy bueno :)
A ver si al final aprendo PHP y me pongo con el CSS :D
--- Cita de: Siquillote en 13 de Julio de 2010, 22:05:41 pm --- ¡Genial west! Enseguida te llevas un karma por arte mia :D.
Gracias a este tutorial he aprendido algo mas.
--- Fin de la cita ---
Te daría un karma, pero no puedo :(
Navegación
[#] Página Siguiente
Ir a la versión completa