Selectores Avanzados y Pseudoclases

Repaso de Selectores Básicos

* { color: red; }

p { color: red; }

.nombreClase { color: red; }

#nombreID { color: blue; }

p a { color: blue; }

p, a { color: blue; }

Repaso de Selectores Avanzados

input[type="radio"] { width: auto; }

p:first-child { font-size: 14px; }

p::first-letter { font-size: 14px; }

p::first-line { font-size: 14px; }

Selectores Avanzados para Cadenas de Texto

Atributos que Comienzan

elemento[atributo^="valor"] { /* cuando empieza con ese valor */ }

Ejemplo: a[href^="mailto:"] { ... }

Atributos que Terminan

elemento[atributo$="valor"] { /* cuando termina con ese valor */ }

Ejemplo: a[href$=".html"] { ... }

Atributos que Contienen

elemento[atributo*="valor"] { /* cuando contiene ese valor */ }

Ejemplo: h1[title*="capítulo"] { ... }

Selectores Compuestos - Pseudoclases

Algunos son selectores dinámicos ya que exigen una acción del usuario para su cumplimiento, indican un estado.

input:valid
input:invalid
tr:hover

Selectores para Relaciones

Descendencia General

p * a { color: blue; }
/* <a> "nieto" de <p> */

Hijo Directo

p > span { color: blue; }
/* <span> hijo directo de <p> */

Hermano Adyacente

h1 + h2 { color: red }
/* <h2> hermano estrictamente seguido de <h1> */

Hermano General

p ~ a { color: blue; }
/* <a> hermano no estrictamente seguido de <p> */

Selectores de Posición

nth-child

p:nth-child(5) { color: blue; }
/* <p> hijo 5to de su padre */

p:nth-last-child(5) { color: blue; }
/* <p> hijo 5to de su padre empezando a contar desde el final */

first-child y last-child

p:first-child { color: blue; }
p:last-child { color: blue; }
/* <p> primer hijo de su padre o último */

nth-of-type

p:nth-of-type(5) { color: blue; }
/* <p> hermano 5to de su tipo */

p:nth-last-of-type(5) { color: blue; }
/* <p> hermano 5to de su tipo contando desde el final */

Elementos Pares e Impares

li:nth-child(2n+1) { color: blue; }
li:nth-child(odd) { color: blue; }
/* <li> impares */

li:nth-child(2n) { color: blue; }
li:nth-child(even) { color: blue; }
/* <li> elementos pares */

Otros Selectores

:not()

:not(p) { color: blue; }
/* no <p> */

:not(.especial) { color: blue; }
/* elementos que no tengan la clase .especial */

:only-child

img:only-child { color: blue; }
/* hijo único */

:empty

section:empty { color: blue; }
/* <section> absolutamente vacíos */

::selection

p::selection { background-color: blue; }
/* color de la selección de un párrafo */