Guía de selectores CSS
El selector es la parte de la regla CSS que indica a qué elemento o parte de una página se le aplica un determinado estilo.
Etiquetas
Se utilizan las propias etiquetas html como selectores. Ejemplo:
Selector { atributo : valor }
<head>
<title> Ejemplo </title>
<style>
h1, h2 { color : red; background-color: blue } //Con la “,” agrupamos dos etiquetas
p { color: green }
</style>
</head>
Clases
Las etiquetas html pueden pertenecer a una clase o varias. Ejemplo:
//HTML
<h1 class=”alerta”> Texto de h1 </h1>
<h2 class=”alerta”> Texto de h1 >/h1>
<p class=”alerta parrafo” > Texto de p con dos clases </p>
//CSS
.alerta { color: red; }
h1.alerta { color: red; } //Hace referencia a los H1 de clase “alerta”
IDs
El ID de un documento html debe ser único. Ejemplo:
<div id="unico">
#unico {color:blue} //Nos referimos a la etiqueta con id="unico"
Descendencia
Aplicando un estilo a los elementos ‘p’ de una clase, si estos elementos se encuentran entre las llaves de apertura y cierre del otro elemento:
.nombredelaclase p { background-color: red; font-size: 14px; }
Aplicando un estilo a los elementos ‘p’ de un id:
#nombredelaclase p { background-color: red; font-size: 14px; }
Parentesco
Se consigue aplicando un estilo a los hijos directos ‘p’ de una clase, se indica con la llave de apertura mayor que:
.nombredelaclase > p { background-color: red; font-size: 14px; }
Adyacente
Se aplica un estilo cuando el primer y segundo elemento comparten un mismo padre e inmediatamente al primer elemento le precede el segundo:
p + span { background-color: red; font-size: 14px; }
Hermanos
Se aplica un estilo solo si el primer y segundo elemento comparten un padre en común y si el segundo elemento va precedido por el primero:
p ~ span { background-color: red; font-size: 14px; }
Atributos
Podemos seleccionar un elemento por su atributo. Hay cuatro selectores de atributo:
- [nombre_atributo] ==> Selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
- [nombre_atributo = valor] ==> Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
- [nombre_atributo ∼= valor] ==> Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
- [nombre_atributo |= valor] ==> Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
Pseudo-clases
Se utilizan para seleccionar estados de un elemento:
- :link ==> Se aplica a un link <a> que no ha sido visitado.
- :visited ==> Se aplica a un link <a> visitado.
- :hover ==> Cuando el ratón pasa por encima de un elemento se activa. (No tiene por qué ser un <a>)
- :active ==> Cuando el elemento se activa al pulsar click, por ejemplo.
- :focus ==> En caso de formulario, cuando el elemento tiene el foco (el cursor).
- :checked ==> Selecciona el checkbox que está marcado.
- :nth-child(n) ==> Selecciona el hijo n del elemento. Admite expresiones complejas como:
li:nth-child(2n+1) //Selecciona los li impares
p:nth-child(2n) //Selecciona los p pares
p:nth-child(4n+1) //Alternan 4 estilos diferentes para los párrafos.
p:nth-child(4n+2) //El primero es el 2 y luego de 2 en 2.
p:nth-child(4n+3) //El primero es el 3 y luego de 4 en 4.
p:nth-child(4n+4) //El primero es el 4 y luego de 4 en 4.
- li:nth-of-type(2) ==> Selecciona el segundo li
- p:first-child ==> Selecciona el primer p hijo del elemento padre.
- p:last-child ==> Selecciona el último p hijo del elemento padre.
- p:only-child ==> Selecciona el único p hijo del elemento padre.
Pseudo-elementos
- p::first-line ==> Selecciona la primera línea del p.
- p::first-letter ==> Selecciona la primera letra del p.
- p::before ==> Genera contenido antes del elemento. Ejemplo:
p::before {content:'Contenido a añadir';color:red}
<h1>Hola</h1>
h1::before {
content: url(smiley.gif);
}
//Se ve una carita antes del texto “Hola”
- p::after ==> Genera contenido después del elemento. Ejemplo:
p::after {content:'Contenido a añadir';color:red}
- p::selection ==> La selección que el usuario hace con el ratón de un p.
Tabla Selectores
Elemento
Ejemplo
Propiedades
*
*
Selecciona todos los elementos.
#id
#lateral
Selecciona el elemento con id=»lateral»
.class
.izquierdo
Selecciona todos los elementos con class=»izquierdo»
elemento
p
Selecciona todos los elementos p
elem1,elem2
div,p
Selecciona todos los elementos div y todos los elementos p
elem1 elem2
div p
Selecciona todos los elementos p dentro de los elementos div
elem1>elem2
div>p
Selecciona todos los elementos p cuyo padre es un elemento div
elem1+elem2
div+p
Selecciona todos los elementos p que se colocan inmediatamente después de los elementos div
elem1∼elem2
p∼ul
Selecciona cada elemento ul que está precedido por un elemento p
[atributo][destino]
Selecciona todos los elementos con un atributo de destino
[atributo = valor]
[volumen = _alto]
Selecciona todos los elementos con volumen=»_alto»
[atributo ∼= valor]
[titulo ∼= flor]
Selecciona todos los elementos cuyo valor de atributo titulo que contiene la palabra flor
[atributo | = valor]
[lang | = en]
Selecciona todos los elementos cuyo valor de atributo lang que comienza con «en»
[atributo ^= valor]
[href ^= «https»]
Selecciona cada elemento a cuyo valor del atributo href comienza con «https»
[atributo $= valor]
[href $= «.pdf»]
Selecciona cada elemento a cuyo valor de atributo href finaliza con «.pdf»
[atributo *= valor]
a[href *= «hola»
Selecciona cada elemento a cuyo valor de atributo href contiene la subcadena «hola»
:active
a:active
Selecciona el enlace activo
::after
p::after
Insertar algo después del contenido de cada elemento p
::before
p::before
Insertar algo antes del contenido de cada elemento p
:checked
input:checked
checked selecciona cada elemento input marcado
:enabled
input:enabled
enabled selecciona cada elemento input habilitado
:disabled
input:disabled
disabled selecciona cada elemento input deshabilitado
:empty
p:empty
Selecciona cada elemento p que no tiene hijos, incluidos los nodos de texto
:first-child
p:first-child
Selecciona cada elemento p que es el primer hijo de su padre.
::first-letter
p::first-letter
Selecciona la primera letra de cada elemento p
::first-line
p::first-line
Selecciona la primera linea de cada elemento p
:first-of-type
p:first-of-type
Selecciona cada elemento p que es el primer elemento p hijo de su padre
:focus
input:focus
Selecciona el elemento de input que tiene el foco
:hover
a:hover
Selecciona enlaces en el mouse al pasar el puntero por encima
:last-child
p:last-child
Selecciona cada elemento p que es el último elemento hijo de su padre
:last-of-type
p:last-of-type
Selecciona cada elemento p que es el último elemento p hijo de su padre
:link
a:link
Selecciona todos los enlaces no visitados
:visited
a:visited
Selecciona todos los enlaces visitados
:not(selector)
:not(p)
Selecciona cada elemento que no es un elemento p
:nth-child(n)
p:nth-child(2)
Selecciona cada elemento p que es el segundo hijo de su padre
:nth-last-child(n)
p:nth-last-child(2)
Selecciona cada elemento p que es el segundo hijo de su padre, contando desde el último
:nth-last-of-type(n)
p:nth-last-of-type(2)
Selecciona cada elemento p que es el segundo elemento principal, contando desde el último elemento secundario
:nth-of-type(n)
p:nth-of-type(2)
Selecciona cada elemento p que es el segundo elemento p hijo de su padre
:only-of-type
p:only-of-type
Selecciona cada elemento p que es el único de su tipo sin ningun otro elemento.
:only-child
p:only-child
Selecciona cada elemento p que es el único elemento hijo de su padre
::selection
::selection
Selecciona la parte de un elemento que selecciona un usuario(::-moz-selection en Firefox, ::-webkit-selection en Chrome)
Si te ha gustado no olvides compartir en redes sociales.
[addthis tool=»addthis_inline_share_toolbox_6jt6″]
Espero que te haya servido. Cualquier duda deja un comentario. Un saludo
2 ideas sobre “Guía de Selectores CSS”
Interesante . Aprendo algo con cada web todos los días. Siempre es estimulante poder devorar el contenido de otros escritores. Osaría usar algo de tu blog en mi web, naturalmente dejare un enlace , si me lo permites. Gracias por compartir.
Gracias, justo lo que buscaba para la tarea