A menudo nos encontramos con maquetaciones que no podemos modificar, para estos casos van muy bien los pseudoselectores. A continuación os presento 42 maneras de seleccionar un elemento

  1. *
    Selecciona todos los elementos.
  2. elemento#custom
    Elemento con un id custom
  3. elemento.custom
    Elemento con una clase custom
  4. elemento::first-line
    Selecciona la primera línea del texto de un elemento.
  5. elemento::first-letter
    Selecciona la primera letra del texto de un elemento.
  6. elemento::before
    Selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
  7. elemento::after
    Selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
  8. elemento::selection
    Selecciona el texto que ha Seleccionado un usuario con su ratón o teclado.
  9. elemento:first-child
    Selecciona el primer elemento de ese tipo.
  10. elemento:last-child
    Selecciona el último elemento de ese tipo.
  11. elemento:nth-child(12)
    Selecciona el elemento indicado pero con la condición de que sea el hijo número 12 de su padre, el número puede ser que qué queramos. También se puede usar con una variable ‘n’, así: nth-child(n), esto es útil para definir las líneas pares: nth-child(2n) o las imaperes: nth-child(2n+1) o múltiples de 3: nth-child(3n)…
  12. elemento:nth-last-child(12)
    idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
  13. elemento:only-child
    Selecciona los elementos que sólo tiene un hijo.
  14. elemento:only-of-type
    Selecciona los elementos únicos en su clase dentro de ese contenedor (que no tenga siblings).
  15. elemento:empty
    Selecciona el elemento indicado pero con la condición de que no tenga ningún hijo. La condición implica que tampoco puede tener ningún contenido de texto.
  16. elemento:nth-of-type(12)
    Selecciona el elemento indicado pero con la condición de que sea el enésimo elemento hermano de ese tipo.
  17. elemento:nth-last-of-type(numero)
    idéntico al anterior pero el número indicado se empieza a contar desde el último hijo.
  18. padre > elemento
    Selecciona el hijo directo de un elemento
  19. otro + elemento
    Selecciona el elemento adyacente a otro elemento
  20. otro ~ elemento
    Selecciona el elemento al mismo nivel que otro elemento
  21. elemento[nombre_atributo]
    Selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor
  22. elemento[nombre_atributo=valor]
    Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
  23. elemento[nombre_atributo~=valor]
    Selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una lista de palabras separadas por espacios en blanco en la que al menos una de ellas es exactamente igual a valor.
  24. elemento[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.
  25. elemento[nombre_atributo^=valor]
    Selecciona todos los elementos que disponen de ese atributo y cuyo valor empieza exactamente por la cadena de texto indicada.
  26. elemento[nombre_atributo$=valor]
    Selecciona todos los elementos que disponen de ese atributo y cuyo valor termina exactamente por la cadena de texto indicada.
  27. elemento[nombre_atributo*=valor]
    Selecciona todos los elementos que disponen de ese atributo y cuyo valor contiene la cadena de texto indicada.
  28. elemento:dir
    Viene de la abreviatura de dirección y es un atributo que defina la dirección del texto para lenguas extrangeras cómo el árabe que se escribe de derecha a izquierda.
  29. enlace:link
    Se aplica a todos los enlaces que todavía no han sido visitados por el usuario.
  30. enlace:visited
    Se aplica a todos los enlaces que han sido visitados al menos una vez por el usuario.
  31. enlace:hover
    Se aplica cuando se pasa por encima del enlace
  32. enlace:active
    Se aplica cuando se presiona el enlace
  33. enlace:focus
    se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está Seleccionado. Normalmente Se aplica a los elementos <input> de los formularios cuando están activados y por tanto, se puede escribir directamente en esos campos.
  34. enlace:target
    Selecciona los enlaces que tengan definido el atributo target
  35. input:checked
    Se aplica alos <input> del tipo checkbox que estén Seleccionados
  36. input:invalid
    Se aplica cuando un campo no es válido por el tipo de campo que se ha defini. Por ejemplo un campo tipo email que el contenido no tiene un formato d eemail.
  37. input:valid
    Se aplica a la inversa que el método anterior.
  38. input:enabled
    Se aplica a los campos habilitados
  39. input:disabled
    Se aplica a los campos deshabilitados
  40. input:required
    Se aplica a campos de un formulario que son requeridos.
  41. input:optional
    Se aplica a la inversa que el método anterior.
  42. input:read-write
    Selecciona los <input> editables.