Seleccionar página

Selectores Avanzados CSS

por | Dic 12, 2022 | Css

Posiblemente este ha sido siempre mi tendón de Aquiles a la hora de conseguir entender, interpretar o escribir propiedades CSS.

Voy a tratar de esquematizar el funcionamiento de los selectores de la forma más sencilla posible e incluir información adicional al respecto.

 

Selectores básicos

Selector universal

El selector universal es el símbolo de asterisco * y se aplica a todos los elementos de forma universal.

* {
  color: #181818;
}

Selector de tipo

Type selector, es el selector de elemento, que hace referencia al nombre de la etiqueta

div {
  /* propiedades para los div */
}

p {
  /* Propiedades para los párrafos */
}

Selector de clase

Class selector o selector de clase, se indican con un punto delante de la clase

.titulo {
  /* propiedades aplicables a la clase título */
}

 

Selector ID

ID Selector, selector de id o de nombre, son similares a las clases:

#cabecera {
  /* propiedades aplicables a la id cabecera */
}

 

Selector de grupo

Group selector o selector de grupo, permite asignar las mismas propiedades a varias clases:

h1, h2 {
  color: blue;
}

.titulo1, .titulo2{
  color: blue;
}

/* Permite incluso combinar distintos tipos*/
#titulo1, .titulo2{
  color: blue;
}

 

Selectores encadenados

Chaining selectors, selectores encadenados o combinados, se aplican a elementos que combinan a la vez varios selectores, ya sean clases o id’s.

/* dos o mas clases*/
.grupo.principal{
  color: blue;
}

/* clase + id */
.grupo#titulo2{
  color: red;
}

 

Combinador descendente

Permite la combinacion de cualquier hijo, siempre que lo sea de un determinado padre.

Se aplica a un elemento de clase .hijo siempre que este anidado en un elemento de clase .padre

El anidamiento puede ser de más de dos elementos.

.padre .hijo {
  color: blue;
}

 

 

 

Selectores Avanzados

Combinaciones padre, hijo y hermano

Aquí encontramos tres posibilidades

  • Combinación hijo: >
  • Combinación adyacente o hermano: +
  • Combinación general hermano: ~

 

See the Pen
CSS Selectors by Juanjo Carballo (@crivinoiax)
on CodePen.

Pseudo-selectores

Al hablar de pseudo-selectores, hay que distinguir entre pseudo-clases cuyo prefijo es el doble punto <:> para hacer referencia a elementos que  ya existen en el código HTML y pseudo-elementos precedidos por dos dobles puntos <::>, haciendo referencia a elementos que no existen en el marcado HTML como se detalla a continuación:

Pseudo-classes

Es una forma de referenciar elementos HTML de diferentes maneras, por la posición dentro del código o por su estructura, e incluso por el estado o como se interactúa con el elemento.

Un interesante artículo que aclara aspectos relacionados con este tema: Specifics on CSS Specificity | CSS-Tricks – CSS-Tricks

Dynamic and User Action Pseudo-classes
  • :focus -> Elemento que tiene el foco en el momento actual, o que está seleccionado.
  • :hover -> Elemento que se encuentra bajo el puntero del ratón.
  • :active -> Elemento que está siendo clickado por el ratón.
  • :visited -> Elemento que ya ha sido clickado.

 

Structural Pseudo-classes
  • :root -> representa el elemento más alto en el arbol de elementos, un elemento sin padre. Similar al elemento <html> pero con algunas diferencias.
  • :first-child – :last-child -> Primer y último elemento hijo.
  • :empty -> Elemento sin hijos.
  • :only-child -> Elemento que no tiene hermanos.
  • :nth-child -> es una pseudo-clase flesible que admite distintas posibilidades:

 

.myList:nth-child(5) {/* Selecciona el quinto elemento de la clase myList */}

.myList:nth-child(3n) { /* Selecciona cada tercer elemento de la clase myList */}

.myList:nth-child(3n + 3) { /* Selecciona cada tercer elemento de la clase myList, empezando por el tercero */}

.myList:nth-child(even) {/* Selecciona cada elemento par en la clase myList */}

 

Pseudo-elements

Similares a las pseudo-clases, pero con un ámbito más abstracto, entre otros, algunos de los más comúnmente utilizados.

  • ::marker -> permite personalizar el estilo de los elementos <li>, viñetas o números.
  • ::first-letter o ::first-line -> permiten personalizar la primera letra o línea de un texto respectivamente.
  • ::selection -> permiten aplicar estilo al resaltado de texto, cuando es seleccionado por el usuario.
  • ::before o ::after -> permiten añadir elementos extra mediante html, antes o después de un determinado elemento.

En el siguiente enlace, se puede acceder a una lista completa de pseudo-elementos: Pseudo-elements – CSS: Cascading Style Sheets | MDN (mozilla.org)