Logo selectores css

Guía de Selectores CSS


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.

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo

 

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Una idea sobre “Guía de Selectores CSS”

Translate »
Ir a la barra de herramientas