{ . . . }

Guía Básica: Selectores de CSS

4 Comentarios

La finalidad de CSS es aplicar estilos y mejorar la apariencia de los elementos que se encuentran en un documento web, y todo esto lo hace por medio de los selectores de CSS. Sin duda la sangre de este lenguaje.En CSS, un selector es un patrón que nos permite apuntar a elementos específicos del documento, y CSS nos ofrece múltiples opciones para alcanzarlos sin importar su tipo, posición o contexto. En esta entrada veremos una guía de los selectores de CSS y cómo podemos utilizarlos para llegar a cualquier elemento en el documento web.Más información: W3C


Selectores Básicos:

Los selectores básicos en CSS nos ayudan a seleccionar elementos HTML basados en su tipo, clases o identificador.

Selectores Compuestos (Combinadores):

Este grupo combina múltiples selectores para poder alcanzar elementos HTML en función de su posición en el documento.

Selectores de Atributos:

Este grupo selecciona elementos HTML en base a los diferentes atributos que estos puedan tener especificados.

Pseudo-elemento:

Los Pseudo-elementos en CSS se utilizan para estilizar partes especificas de un elemento o generar contenido en torno a estos.

Pseudo-clase:

Este grupo de selectores nos permiten aplicar estilos a un elemento ya sea en relación a su contexto como a factores externos que pueden interactuar con este, también a algún estado especial que esté relacionado con la naturaleza de dicho elemento.

Selector de Tipo

Los selectores de tipo hacen su selección basados en el tipo de elemento (etiquetas o tags) especificado en el documento HTML, es decir por el nombre del nodo de este.

element {
  css declarations;
}
Cuando se utiliza este selector para aplicar estilos, estos se aplicaran a todos los elementos o etiquetas del mismo tipo que se encuentren en el documento, es decir, con ese mismo nombre de nodo.
article {
   color: #fff;
   background: #FF6347;
   padding: 10px;
}

En el ejemplo anterior se aplicarán los estilos especificados a todos los elementos <article> que se encuentren en el documento.

Ver ejemplo

Selector de Grupo

En CSS Los selectores los podemos agrupar y separar con una coma (,), estos estilos indicados dentro del bloque se aplicarán a los elementos que coincidan con los selectores indicados en el grupo.

element, element {
  css declarations;
}
Es importante recordar que cada selector dentro del grupo es autónomo. Podemos pensar en la coma separadora como el operador lógico “OR” de los lenguajes de programación, donde se aplicarán los estilos establecidos en el bloque a cualquier selector que forme parte del grupo sin importar que los demás no coincidan o no existan.
header, footer {
   background: #DAA520;
   color: #fff;
   text-align: center;
}

En el ejemplo anterior se le aplicarán los estilos especificados a los elemento <header> y <footer>

Ver ejemplo

Selector de Clase

Los selectores de clases seleccionan elementos basados en el contenido del atributo class. Para seleccionar elementos con una clase específica, escribimos el carácter punto . seguido del nombre de la clase.

.classname {
  css declarations;
}
Recuerda que el atributo class puede ser establecido en múltiples elementos, y en un elemento se pueden establecer múltiples nombres de clases si así se requiere, solo se establecen como una lista de nombres separados por espacios, y uno de esos debe coincidir exactamente con el nombre de clase dado en el selector, esto sin importar el tipo de elemento.
.personal {
   color: #FF6347;
   text-decoration: underline;
}

En el ejemplo anterior se le aplicarán los estilos especificados a todos los elementos que contengan la clase .personal

Ver ejemplo

Selector de Identificador

El selector de identificador selecciona elementos basados en el contenido del atributo id del elemento HTML. Para seleccionar elementos con un id especifico, escribimos el símbolo de almohadilla #, seguido del nombre del identificador.

#id {
  css declarations;
}
Al igual que el atributo de class, el id es un atributo genérico que se puede aplicar a prácticamente cualquier elemento HTML. Recuerda que el identificador de un elemento debe de ser único en el documento web, por lo que a diferencia de las clase este tipo de selectores no pueden reutilizarse y aplicarse a varios elementos en el mismo documento.
#principal {
   background: #DAA520;
   color: #fff;
   text-align: center;
}

En el ejemplo anterior se le aplicarán los estilos especificados al elemento con identificador #principal

Ver ejemplo

Selector Universal

El selector Universal (*) selecciona todos los elementos en el documento HTML sin importar el nivel de profundidad que tenga este.

* {
  css declarations;
}
Este selector también puede ser utilizado como combinador a donde se desee orientar el nivel de anidamiento específico, es decir donde el nivel de anidamiento es importante, pero no el tipo de elemento.
.contenedor > * {
    color: #000;
}

En el ejemplo anterior se le aplicarán los estilos del bloque a todos los elementos que sean descendientes directo del elemento con clase contenedor.

Ver ejemplo

Selector de Descendientes

El selector de descendientes selecciona elemento que están dentro de otros elementos. Este tipo separa los selectores anidados con un espacio en blanco, básicamente combina los selectores de tal manera que los elementos coincidentes con el último selector son seleccionados, esto siempre y cuando los selectores antecesor coincidan con el patrón establecido en el documento HTML.

element element {
  css declarations;
}
Este tipo de selector es útil cuando se desea aplicar estilos a elementos que residen dentro de otros elemento sin importar el nivel de indentación que tenga este.
div p {
   background: #9E9E9E;
   color: #fff;
   padding: 10px;
}

En el ejemplo anterior se le aplicarán los estilos especificados a todos los <p> que estén dentro de algún <div>

Ver ejemplo

Selector de Hijos Directos

El selector de hijos directos selecciona elementos que son descendientes inmediato de otros elementos. Para esto se utiliza el combinador ">", este separa dos selectores y selecciona solo a los que coinciden con el segundo selector establecido, esto siempre y cuando el selector antecesor coincida con el patrón establecido en el documento HTML.

element > element {
  css declarations;
}
Este selector selecciona solo elementos de primer nivel de indentación, mientra que el selector de descendiente busca y selecciona elementos anidados a cualquier nivel de indentación.
div > p {
   background: #8BC34A;
   color: #fff;
   padding: 10px;
}

En el ejemplo anterior se le aplicarán los estilos especificados a todos los <p> que sean hijos directos de algún <div>

Ver ejemplo

Selector de Hermanos Adyacentes

El Selector de hermano adyacente o selector del hermano próximo, selecciona a un elemento siempre y cuando esté inmediatamente después y en el mismo nivel (no dentro o anidado) de otro elemento especificado en el selector.

element + element {
  css declarations;
}
Este selector permite elegir un elemento que debe de cumplir dos condiciones: Ser hermano, es decir ser hijo de un mismo padre y ser adyacente del elemento que estamos utilizando como contexto en el documento HTML.
div + p {
   background: #9E9E9E;
   color: #fff;
   padding: 10px;
}

En el ejemplo anterior se le aplicarán los estilos especificados al elemento <p> que se ubica inmediatamente después de un elemento <div>

Ver ejemplo

Selector General de Hermanos

El selector general de hermanos "~" permite seleccionar el segundo elemento sólo si está precedido por el primer elemento especificado y solo si ambos comparten el mismo padre. Este selector es muy similar al selector de hermano adyacente, excepto que este permite seleccionar todos los hermanos del tipo de elemento especificado, no sólo el que aparece inmediatamente después del elemento.

element ~ element {
  /* estilos */
}
Este selector actúa en los elementos que comparten el mismo padre. Ejm.: A ~ B, este coincide con todos los elementos B que están precedidos por un elemento A, sean o no adyacentes. (afecta a elementos hermanos que se encuentran luego de el)
div ~ p {
   background: #8BC34A;
   color: #fff;
   padding: 10px;
}

En el ejemplo anterior se le aplicará los estilos especificados a todos los <p> que se encuentren después de un <div> y que estén en su mismo nivel jerárquico en el documento.

Ver ejemplo

Nombre de Atributo

Los selectores de atributos [] por su nombre, simplemente nos permite orientar la selección a aquellos elementos HTML que tienen dichos atributos especificados.

[attribute] {
  /* estilos */
}
Básicamente con este selector solo apuntamos a que el elemento HTML tenga dicho atributo establecido, no importando su valor o tipo de elemento. Aunque también le podemos especificar un tipo de elemento para restringir la búsqueda y selección.
div[class] {
    background: #FF9800;
    color: #fff;
    padding: 10px;
}

En el ejemplo anterior se le aplicará los estilos especificados a todos los elementos <div> que tienen establecido el atributo class

Ver ejemplo

Atributo y Valor

El selector de atributos por su nombre y valor, nos permiten orientar la selección a aquellos elementos HTML que tienen dichos atributos establecidos y que ademas coincidan exactamente con los valores especificados en la regla.

[attribute = value] {
  /* estilos */
}
Los selectores de atributo se hacen mucho más útiles si consideramos que podemos seleccionar por el valor del atributo y no sólo por el nombre del atributo.
a[rel="external"] {
    color: #FF9800;
    border: 1px dashed;
    padding: 4px;
}

En el ejemplo anterior se le aplicará los estilos especificados a todos los elementos <a> que tienen establecido el atributo "rel" y que el valor de este sea "external"

Ver ejemplo

Atributo y Valor / Valor Espaciado

El selector de atributos identificado con el carácter "~" también conocido como “Selector de valor delimitado” selecciona los elementos con el atributo especificado y cuyo valor de atributo contenga la palabra dada entre una lista de palabras separadas por espacios.

[attribute~= value] {
  /* estilos */
}
A diferencia del selector de atributos por nombre y valor, este puede seleccionar un valor que forme parte de una lista de palabras separadas por espacios, donde una de ellas el valor establecido.

Por ejemplo: Si existiese en el documento un elemento con un número de clases aplicadas como el siguiente:

<div class="clase1 clase2 clase3"> Contenido </div>

Podriamos seleccionarlo usando cualquiera de los siguientes selectores: (Cosa que no pasaría si aplicáramos el selector simple de atributos por nombre y valor)

div[class~="clase1"] {...}
div[class~="clase2"] {...}
Ver ejemplo

Atributo y Valor / Seguido por un guión

El selector de atributos identificado con el carácter "|" también llamado “Selector de atributos de idioma“, selecciona elementos con el atributo especificado y su valor establecido, y a diferencia del selector de atributos por nombre y valor, este puede seleccionar también basado en el valor seguido de un guión -

[attribute|= value]{
  /* estilos */
}
Este es muy utilizado para seleccionar elementos con coincidencias de subcódigos en otros idiomas o cualquier atributo con un nombre extenso donde la separación es un guión.
<p lang="en"> English </p>
<p lang="en-US"> American English </p>

podemos seleccionar los elementos anteriores de la siguiente forma:

p[lang|="en"] {...}
Ver ejemplo

Atributo Empieza con Valor Especificado

El selector de atributos “Empieza con” identificado con el carácter "^" permite seleccionar elementos que tienen el atributo especificado con un valor que comienza precisamente con una cadena dada o parte de ella.

[attribute^= value]{
  /* estilos */
}
Este selector es muy utilizado para seleccionar elementos que tienen un patrón común al iniciar la cadena de valor del atributo especificado.
<div class="principal">contenido</div>
<div class="princ">contenido</div>
<div class="principal destacado">contenido</div>
<div class="primario">contenido</div>

Con el siguiente selector alcanzamos los elementos <div> con atributo class y que ademas comiencen con la cadena "prin".

div[class^="prin"] {...}
Ver ejemplo

Atributo Termina con Valor Especificado

El selector de atributos “Termina con” identificado con el carácter "$" permite seleccionar elementos que tienen el atributo especificado con un valor que termina precisamente con una cadena dada o parte de ella.

[attribute$= value]{
  /* estilos */
}
Este selector es muy utilizado para seleccionar elementos que tienen un patrón común al terminar la cadena de valor del atributo especificado.
<div class="documento-pdf"> Doc1.pdf </div>
<div class="documento-pdf"> Doc2.pdf </div>
<div class="documento-word"> Doc.word </div>

Con el siguiente selector alcanzamos los elementos <div> con atributo class y que ademas terminen con la cadena pdf.

div[class$="pdf"]{...}
Ver ejemplo

Atributo Contiene Valor Especificado

El selector de atributos “Contiene” identificado con el carácter "*" permite seleccionar elementos que tienen el atributo especificado y que en su valor contenga la cadena dada.

[attribute*= value]{
  /* estilos */
}
Este selector tal vez sea el mas poderoso de todos los selectores de atributos que tenemos hasta el momento, ya que permite seleccionar elementos por su atributo y que ademas contenga el valor especificado en cualquier parte de este.
<div class="principal"> contenido </div>
<div class="contprinc"> contenido </div>
<div class="destacado principal"> contenido </div>
<div class="content_princ"> contenido </div>

Con el siguiente selector alcanzamos los elementos <div> con atributo class y que ademas contenga la cadena prin en cualquier parte de su valor.

div[class*="prin"]{...}
Ver ejemplo

Before y After

Estos pseudo-elemento permiten agregar y seleccionar contenido antes y después del contenido de un elemento dado.
::before para insertar contenido antes del contenido de un elemento.
::after para insertar contenido después del contenido de un elemento.

::before{
  /* estilos */
}
::after{
  /* estilos */
}
Estos pseudo-elemento no selecciona contenido existe en el documento, mas bien estos hacen referencia a una ubicación donde se puede insertar contenido adicional generado desde los estilos CSS, esto gracias a la propiedad "content". Ahora, aunque este contenido es renderizado en la pagina web, este no se convertirá en parte del DOM, es decir, no se sumará a la estructura del documento HTML, aunque el contenido generado heredará las propiedades y estilos de sus elementos superiores.
a[href$=".pdf"]::before {
    content: url(pdf.png);
}
a[href$=".pdf"]::after {
    content: ".pdf";
}

Los selectores anteriores selecciona cualquier enlace que tenga el atributo href y que termine con la cadena .pdf. Con ::before agrega antes del contenido del elemento la imagen pdf.png y con ::after agrega después del contenido del elemento la cadena .pdf

Ver ejemplo

First Letter

El pseudo-elemento ::first-letter aplica estilos a la primera letra de la primera línea de un elemento HTML.

::first-letter{
  /* estilos */
}
  • ::first-letter sólo funciona si el elemento principal es de nivel de bloque ( no en elementos en línea. Por ejemplo: un elemento <span> )
  • Este pseudo-elemento aplicará estilos a la primera letra de un elemento HTML generado en la estructura del documento o también de un contenido generado por el pseudo-elemento ::before
p::first-letter {
    font-size: 200%;
    color: #4caf50;
    font-weight: bold;
}
Ver ejemplo

First Line

El pseudo-elemento ::first-line aplica estilos a la primera línea de un elemento HTML.

::first-line{
  /* estilos */
}
  • ::first-line sólo funciona si el elemento principal es de nivel de bloque ( no en elementos en línea. Por ejemplo: un elemento <span> )
  • Tenga en cuenta que la longitud de la primera línea depende de muchos factores, incluyendo la anchura del elemento, la anchura del documento, y el tamaño de fuente del texto del elemento contenedor.
p::first-line {
    color: #FF9800;
    font-weight: bold;
}
Ver ejemplo

Selection

El pseudo-elemento ::selection aplica estilos a una porción de contenido en el documento que ha sido seleccionado ( ya sea con el mouse o algún otro puntero en un dispositivo ) por parte del usuario.

::selection {
  /* estilos */
}
  • El pseudo-elemento ::selection fue redactado en el nivel 3 de los selectores de CSS, pero este fue quitado antes de que alcanzara el estatus de recomendado, a pesar de esto la mayoría de navegadores siguen dando soporte a este selector.
  • Sólo las propiedades CSS color, background-color y text-shadow pueden ser aplicadas por medio de este selector.
::selection {
    color: #ffffff;
    background: #FF9800;
    text-shadow: 0px 2px 1px #545454;
}
/*Para Firefox es necesario utilizar el prefijo -moz-*/
::-moz-selection {}
Ver ejemplo

Link

La pseudo-clase :link representa el estado normal de los enlaces y se utiliza para seleccionar los vínculos que aún no han sido visitados por el usuario.

:link {
  /* estilos */
}
Cuando se utiliza la pseudo-clase :link para especificar estilos de enlaces no visitados, se recomienda establecerla antes de todas las demás reglas relacionadas con los enlace, el orden seria: :link :visited :hover :active.
Ver ejemplo

Visited

La pseudo-clase :visited representa y selecciona los enlaces cuando estos ya han sido visitados por el usuario.

:visited {
  /* estilos */
}
Cuando se utiliza la pseudo-clase :visited para especificar estilos de enlaces visitados, se recomienda establecerla después de :link y antes de :hover :active.
a:visited {
    color: gray;
}
Ver ejemplo

Hover

La pseudo-clase :hover representa el estado de los elementos cuando el usuario coloca el puntero sobre este.

:hover {
  /* estilos */
}
El uso de la pseudo-clase :hover no tiene que restringirse a los enlaces, este puede ser utilizado con cualquier elemento en el documento HTML.
p:hover {
    color: #ffffff;
    background: #FF9800;
}
Ver ejemplo

Active

La pseudo-clase :active selecciona los elementos que ha sido activado “presionado” por el usuario, ya sea por la presión del puntero con un mouse, por un dispositivo apuntador o por un toque en un dispositivo de pantalla táctil.

:active {
  /* estilos */
}
La acción de la pseudo-clase :active se da desde el momento en el que el usuario presiona el botón del ratón hasta el momento en el que lo suelta.
a:active {
    color: #ffffff;
    background: #FF9800;
}
Ver ejemplo

Focus

La pseudo-clase :focus selecciona los elementos que ha recibo el foco, ya sea porque el usuario lo ha seleccionado mediante el uso del teclado, a través de un dispositivo señalador, o bien mediante el ratón (por ejemplo el input de un formulario).

:focus {
  /* estilos */
}
La pseudo-clase :focus funciona de forma similar a la pseudo-clase :active, la diferencia es que :active se da en lo que dura acción del clic y :focus hasta que el elemento pierde el foco.
input:focus {
    background: #FF9800;
    color: #fff;
}
Ver ejemplo

First Child

La pseudo-clase :first-childPrimer hijo” selecciona el elemento de destino especificado, solo si este es el primer hijo de algún otro elemento que lo contenga.

:first-child {
  /* estilos */
}

Esta pseudo-clase sólo se aplica a elementos, y no toma en cuanta el contenido que pueda tener el contenedor principal en si. Es decir solo los elementos cuentan como hijos, no el contenido.

Si se desea seleccionar y estilizar el primer elemento dentro de un contenedor, sea o no el primer hijo, se puede utilizar la pseudo-clase estructural :first-of-type, el cual, como su nombre indica, seleccionará el primer elemento de este tipo, sea o no el primer hijo de un elemento.
p:first-child {
    background: #FF9800;
    color: #fff;
}
Ver ejemplo

Last Child

La pseudo-clase estructural :last-childÚltimo hijo” selecciona el elemento de destino especificado, solo si este es el último hijo de algún otro elemento que lo contenga.

:last-child {
  /* estilos */
}

Al igual que :first-child, :last-child sólo se aplica a elementos, y no toma en cuanta el contenido que pueda tener el contenedor principal en si. Es decir solo los elementos cuentan como hijos, no el contenido.

Si se desea seleccionar y estilizar el último elemento dentro de un contenedor, sea o no el último hijo, se puede utilizar la pseudo-clase estructural :last-of-type, el cual, como su nombre indica, seleccionará el último elemento de este tipo, sea o no el último hijo de un elemento.
p:last-child {
    background: #FF9800;
    color: #fff;
}
Ver ejemplo

First of Type

La pseudo-clase estructural :first-of-typePrimero de su tipo” selecciona el elemento de destino, solo si este es el primer elemento del tipo especificado en la lista de hijos un elemento padre.

:first-of-type {
  /* estilos */
}
El selector :first-of-type es similar al selector :first-child, excepto que es mucho más específico, ya que este seleccionará el primer elemento del tipo especificado, sea o no el primer hijo. Por el contrario :first-child, se utiliza para seleccionar el elemento sólo si es el primer hijo del elemento padre.
p:first-of-type {
    background: #FF9800;
    color: #fff;
}
Ver ejemplo

Last of Type

La pseudo-clase estructural :last-of-typeÚltimo de su tipo” selecciona el elemento de destino, solo si este es el último elemento del tipo especificado en la lista de hijos un elemento padre.

:last-of-type {
  /* estilos */
}
El selector :last-of-type es similar al selector :last-child, excepto que es mucho más específico, ya que este seleccionará el último elemento del tipo especificado, sea o no el último hijo. Por el contrario :last-child, se utiliza para seleccionar el elemento sólo si es el útlimo hijo del elemento padre.
p:last-of-type {
    background: #FF9800;
    color: #fff;
}
Ver ejemplo

Only Child

La pseudo-clase :only-childHijo único” selecciona el elemento de destino, solo si este es el único elemento especificado en un elemento padre. Es decir, se selecciona el elemento sólo si su padre no tiene otros hijos especificados.

:only-child {
  /* estilos */
}
  • Si se especifica li:only-child seleccionará un elemento li sólo si es el único elemento de la lista
  • Si se especifica p:only-child seleccionará un párrafo sólo si este es único dentro de algún contenedor.
El selector :only-child selecciona cualquier elemento que sea el único hijo de su padre. Es lo mismo que :first-child, :last-child o :nth-child(1), :nth-last-child(1) pero con una especificidad más baja.
p:only-child {
    background: #FF9800;
    color: #fff;
}
Ver ejemplo

Only of Type

La pseudo-clase :only-of-typeÚnico de su tipo” selecciona el elemento de destino, solo si este es el único elemento especificado de su mismo tipo en un elemento contenedor.

:only-of-type {
  /* estilos */
}
  • Si se especifica p:only-of-type seleccionará el párrafo sólo si este es el único de su tipo dentro de su elemento padre.
El selector :only-of-type es similar al selector :only-child, la diferencia es que :only-child selecciona si el elemento es hijo único (no tiene elementos hermanos), mientras que :only-of-type selecciona el elemento si es el único de su tipo (aunque tenga elementos hermanos).
p:only-of-type {
    background: #FF9800;
    color: #fff;
}
Ver ejemplo

Nth Child

La pseudo-clase :nth-child() permite seleccionar elementos en función de su índice (orden de aparición) dentro de su contenedor

:nth-child() {
  /* estilos */
}

A :nth-child() se le puede pasar un número positivo como argumento, este seleccionará el elemento cuyo índice dentro de su matriz coincide con el argumento pasado. Por ejemplo, li:nth-child(3) seleccionará el elemento de la lista con valor en su índice 3, es decir, se seleccionará el tercer elemento de la lista.

Podemos pasar alguna de las dos palabras predefinidas: even y odd.
:nth-child(even) seleccionará los elementos pares (2, 4, 6, 8, etc.), y :nth-child(odd) seleccionará todos los elementos de índice impar (1, 3, 5, 7, etc.)

:nth-child() también permite seleccionar uno o más elementos utilizando una fórmula en su argumento que calculará los valores introduccidos y devolvera un patron de seleccion dinamica. :nth-child(an+b) donde:
a equivale al número de veces que deseamos que se repita el patrón de selección.
n representa un patrón de repetición (empieza en 0).
b es el valor de desplazamiento inicial (aumento).

ejemplos:

  • li:nth-child(3n) // selecciona cada 3 elementos a partir del tercer elemento.
  • li:nth-child(4n+1) // selecciona cada 4 elementos a partir del primer elemento.
  • li:nth-child(2n+2) // selecciona cada 2 elementos a partir del segundo elemento.
  • li:nth-child(1n+4) // selecciona cada 1 elemento a partir del cuarto elemento.

Tambien podemos utilizar valores negativos para a lo que hace simplemente es contar en reversa, y para b lo que hace simplemente restar en la posicion de desplazamiento inicial y selecciona solo si se devolve un valor positivo.

  • li:nth-child(-2n+6) // selecciona cada 2 elementos a partir del sexto y en reversa (6,4,2)
  • li:nth-child(-n+4) // selecciona cada 1 elemento a partir del cuarto y en reversa (4,3,2,1)
  • li:nth-child(3n-2) // selecciona cada 3 elementos a partir del primer.
Ver ejemplo

Nth Last Child

La pseudo-clase :nth-last-child() es similar a la pseudo-clase :nth-child() que permite seleccionar elementos en función de su índice dentro de su contenedor, la diferencia está en que :nth-last-child() selecciona partiendo desde el último elemento hijo.

:nth-last-child() {
  /* estilos */
}
:nth-last-child() tiene todas las características de :nth-child() para generar patrones de selección en base al índice de los elementos. Así que como argumento podemos pasar el numero de índice del elemento a seleccionar, las palabras predefinidas: even y odd para seleccionar los elementos pares e impares o la fórmula de selección dinámica (an+b) vista en la pseudo-clase :nth-child()
li:nth-last-child(1) {
    background: #FF9800;
    color: #fff;
}

En el ejemplo anterior se selecciona el último elemento <li>, o bien el primero partiendo desde la última posición.

Ver ejemplo

Nth of Type

La pseudo-clase :nth-of-type() es similar a la pseudo-clase :nth-child() esta permite seleccionar elementos en función de su índice dentro de su contenedor, la diferencia está en que :nth-of-type() selecciona los elementos del mismo tipo que el especificado en el selector.

:nth-of-type() {
  /* estilos */
}
:nth-of-type() tiene todas las características de :nth-child() para generar patrones de selección en base al indice de los elementos. Así que como argumento podemos pasar el numero de indice del elemento a seleccionar, las palabras predefinidas: even y odd para seleccionar los elementos pares e impares o la fórmula de seleccion dinámica (an+b) vista en la pseudo-clase :nth-child()
p:nth-of-type(2n+1) {
    background: #FF9800;
    color: #fff;
}

La pseudo-clase :nth-of-type(n) es útil si queremos seleccionar el mismo tipo de elemento o etiqueta, sin importar donde está situada dentro de su elemento padre, o que otro tipo de elementos aparecen antes de esta.

Ver ejemplo

Nth Last of Type

La pseudo-clase :nth-last-of-type() es similar a la pseudo-clase :nth-child() que permite seleccionar elementos en función de su índice dentro de su contenedor, y tambien al igual que :nth-of-type() solo selecciona los elementos del mismo tipo. La diferencia esta en que :nth-last-of-type() selecciona partiendo desde el último elemento hijo.

:nth-last-of-type() {
  /* estilos */
}
:nth-last-of-type() tiene todas las caracteristicas de :nth-child() para generar patrones de seleccion en base al indice de los elementos. Asi que como argumento podemos pasar el numero de indice del elemento a seleccionar, las palabras predefinidas: even y odd para seleccionar los elementos pares e impares o la fórmula de seleccion dinámica (an+b) vista en la pseudo-clase :nth-child()
li:nth-last-of-type(1) {
    background: #FF9800;
    color: #fff;
}

En el ejemplo anterior se selecciona el último elemento del tipo <li>, o bien el primero partiendo desde la última posición.

Ver ejemplo

Empty

La pseudo-clase :empty selecciona cualquier elemento HTML vacio (que no tiene hijos).

:empty {
  /* estilos */
}
Un elemento cuenta como vacío si este no tiene contenido dentro de el, esto incluye elementos, textos, incluso espacios, ya que son considerados como caracteres dentro de un elemento. Los comentarios no afectan, ya que no son procesados como contenido.

Los elementos de cierre automático, tales como <hr />, <br /> y <img />, se consideran vacíos y coincidirán con el selector :empty.

div:empty {
    height: 20px;
    background-color: linen;
}

Esto aplicaría los estilos del selector a los elementos <div> que se encuentren sin contenido.

Ver ejemplo

Root

La pseudo-clase :root selecciona el elemento raíz del documento HTML.

:root {
  /* estilos */
}
En un documento web el elemento raiz siempre será la etiqueta <html> ya que es el ancestro de más alto nivel en el documento, por tanto, el utilizar la pseudo-clase :root es similar a utilizar el selector de tipo para el elemento <html>, la diferencia es que la pseudo-clase tiene mayor especificidad.
:root {
    background-color : #009966;
    color: #fff;
}

Esto aplicaría los estilos del selector al elemento <html> siendo este el elemento raíz del documento.

Ver ejemplo

Enabled

La pseudo-clase :enabled se utiliza para seleccionar cualquier elemento de interfaz de usuario que se encuentre habilitado (utilizado principalmente en elementos de formulario).

:enabled {
  /* estilos */
}

Este selector coincide con los elementos que aceptan la interacción con el usuario (botones, campos de texto, menús de selección etc.) permitiendole el ingresar texto, hacer foco, enviar, seleccionar o checkear dicho elemento.

El estado por defecto de este tipo de elementos es :enabled es decir habilitado, por tanto los estilos aplicados a los elementos serán aplicados sin necesidad de establecer esta pseudo-clase a no ser que se interactue con el estado del elemento en cuestion.
input[type=text]:enabled {
    background: tomato;
    color: #fff;
}

En el ejemplo anterior se le aplicaran los estilos establecidos a los <input> que se encuentren habilitados.

Ver ejemplo

Disabled

La pseudo-clase :disabled se utiliza para seleccionar elementos de interfaz de usuario que se encuentran deshabilitados (utilizado principalmente en elementos de formulario).

:disabled {
  /* estilos */
}
Un elemento puede ser desahabilitado gracias al atributo disabled de HTML5, cuando este está presente, el elemento no acepta las interacciones del usuario.
input:disabled {
    background: #ddd;
    cursor: not-allowed;
}

En el ejemplo anterior se le aplicaran los estilos establecidos a los <input> que se encuentren deshabilitados.

Ver ejemplo

Checked

La pseudo-clase :checked se utiliza para la selección de elementos de interfaz de usuario que pueden ser activados por este, ya sean: radio botones, casillas de verificación u opciones de un elemento de selección.

:checked {
  /* estilos */
}
Este selector coincide con los elementos que son activados (chequeado, comprobados, seleccionados) ya sea por parte del usuario, o porque es establecido explícitamente por el autor gracias al atributo checked en el elemento HTML.
<input type="radio" checked="checked">
<!-- También podemos usar -->
<input type="checkbox" checked>

Esto aplicaría los estilos del selector inicialmente, pero, por supuesto, el usuario puede alternar el estado del elemento gracias a su interacción con el elemento.

  • input[type="radio"]:checked // selecciona todos los radio botones que han sido activados
  • input[type="checkbox"]:checked // selecciona todos los checkboxes que han sido activados
  • option:checked // selecciona las opciones de un elemento select que han sido seleccionadas
Ver ejemplo

Required

La pseudo-clase :required se utiliza para la selección de elementos de interfaz de usuario que sean requeridos. Básicamente selecciona los elementos que tengan el atributo de HTML required establecido.

:required {
  /* estilos */
}
<input type="checkbox" required>
Este selector es útil para estilizar elementos de formulario <input>, <select>, <textarea> que sean obligatorios y que se quiera mostrar de forma visual y diferente al usuario que estos son necesarios y deben ser llenados con datos validos antes de su envío.
input[type="email"]:required {
    border:2px solid tomato;
}

Esto aplicaría los estilos del selector a los <input> de tipo email y que ademas tengan el atributo required establecido.

Ver ejemplo

Optional

La pseudo-clase :optional se utiliza para la selección de elementos de interfaz de usuario que son opcionales. Estos son los que no tienen definido el atributo required, es decir cuando los controles no son obligatorios.

:optional {
  /* estilos */
}
Este selector es útil para estilizar elementos de formulario <input>, <select>, <textarea> de forma opcional, esto para poner menos enfoque visual sobre ellos y un mayor enfoque en los campos obligatorios.
input[type="url"]:optional {
    background-color: #f5f5f5;
    border: 1px solid #eee;
}

Esto aplicaría los estilos del selector a los <input> de tipo <url> y que no tengan el atributo required establecido.

Ver ejemplo

Read Only

La pseudo-clase :read-only se utiliza para la selección de elementos de interfaz de usuario que son de solo lectura. Estos son los que tienen definido el atributo readonly en el elemento HTML, lo que los hace no editables por el usuario.

:readonly {
  /* estilos */
}
Las pseudo-clase :read-only y :disabled son similares en que ninguna permite la interacción con el usuario, la principal diferencia es que :disabled no envia su valor, mientras que :read-only si enviará su valor.
input[type="text"]:read-only {
    background-color: #bbb;
    border: 1px solid #888;
}

Esto aplicaría los estilos del selector a los <input> de tipo text y que tengan el atributo readonly establecido.

Ver ejemplo

Read Write

La pseudo-clase :read-write se utiliza para la selección de elementos de interfaz de usuario que pueden ser editados por el usuario.

:read-write {
  /* estilos */
}
Las pseudo-clase :read-write es útil para dar estilos a los elementos que son editables por parte del usuario, estos pueden ser: <input>, <textarea>, aunque también puede seleccionar cualquier elemento HTML que tenga establecido el atributo contenteditable
input[type="text"]:read-write {
    background-color: #bbb;
    border: 1px solid #888;
}

Esto aplicaría los estilos del selector a los elementos <input> de tipo text que puedan ser editados, es decir que no tengan establecidos los atributos :readonly o :disabled

Ver ejemplo

Valid

La pseudo-clase :valid selecciona los elementos de formulario cuyo valor introducido concuerda con la configuración del elemento en cuestión.

:valid {
  /* estilos */
}
Las pseudo-clase :valid permite que los campos diligenciados con datos válidos adopten una apariencia diferente, y que esta pueda ayudar al usuario a confirmar que sus datos están correctamente introducidos en el elemento.
Este selector sólo funciona en elementos de formulario con restricciones en su tipo de valor.
input[type="email"]:valid {
    background-color: #4CAF50;
    border: 1px solid #8BC34A;
    color: #f2ffc1;
}

Esto aplicaría los estilos del selector a los elementos <input> de tipo email cuyos valor coincida con el patrón establecido para las direcciones de correo electrónico.

Ver ejemplo

Invalid

La pseudo-clase :invalid selecciona los elementos de formulario cuyo valor introducido no concuerda con la configuración del elemento en cuestión.

:invalid {
  /* estilos */
}
Las pseudo-clase :invalid permite que los campos diligenciados con datos inválidos adopten una apariencia diferente, y que esta pueda indicar al usuario que sus datos no están correctamente introduccidos en el elemento.
Este selector sólo funciona en elementos de formulario con restricciones en su tipo de valor.
input[type="email"]:invalid {
    background-color: #F44336;
    border: 1px solid #b90d00;
    color: #ffc9c5;
}

Esto aplicaría los estilos del selector a los elementos <input> de tipo email cuyos valor no coincida con el patrón establecido para las direcciones de correo electrónico.

Ver ejemplo

In Range

La pseudo-clase :in-range selecciona los elementos de formulario cuando el valor de sus atributos de restricción se encuentran dentro del rango especificado.

:in-range {
  /* estilos */
}
Las pseudo-clase :in-range sólo funciona para elementos con restricciones en su alcance, como por ejemplo los <input> con los atributos min y max especificados.
<input type="number" min="1" max="10">

Para seleccionar el elemento anterior cuando su valor esté entre el rango permitido, usamos la pseudo-clase :in-range de la siguiente manera:

input[type="number"]:in-range {
    background-color: #CDDC39;
    border: 1px solid #4CAF50;
    color: #0e8613;
}
Ver ejemplo

Out Of Range

La pseudo-clase :out-of-range selecciona los elementos de formulario cuando el valor de sus atributos de restricción se encuentran fuera del rango especificado.

:out-of-range {
  /* estilos */
}
Las pseudo-clase :out-of-range sólo funciona para elementos con restricciones en su alcance, como por ejemplo los <input> con los atributos min y max especificados.
<input type="number" min="1" max="10">

Para seleccionar el elemento anterior cuando su valor esté fuera del rango permitido, usamos la pseudo-clase :out-of-range de la siguiente manera:

input[type="number"]:out-of-range {
    background-color: #CDDC39;
    border: 1px solid #4CAF50;
    color: #0e8613;
}
Ver ejemplo

Lang

La pseudo-clase :lang() selecciona elementos HTML basado en el valor de su atributo lang, siempre y cuando este coincida con el valor dado como argumento en este selector.

:lang(código de idioma) {
  /* estilos */
}

El código para definir el idioma de un documento o elemento consta generalmente de dos letras: “ca” Catalán, “en” inglés, “fr” francés, etc, aunque esto puede variar Ver: Language tags in HTML, este selector nos permite especificar el código del idioma especificado en el elemento, independentemente a las convenciones con respecto al formato. Ejemplo: Veamos cómo se utilizaría para el francés canadiense.

<p lang="fr-CA">je suis en train d'apprendre!</p>

El selector a utilizar sería:

span:lang(fr-CA) {
    background-color : #009966;
    color: #fff;
}
El comportamiento de esta pseudo-clase puede tener el mismo efecto que el selector de atributos de idioma [attribute|=value]. La diferencia es que la pseudo-clase :lang() puede seleccionar los elementos si el idioma es establecido en un elemento superior, a través del encabezado HTTP de la página o de la etiqueta <meta> del documento HTML.
Ver ejemplo

Not

La pseudo-clase de negacion :not() selecciona los elementos al que se le asigna la pseudo-clase exceptuando el selector especificado en su argumento.

:not(selector) {
  /* estilos */
}

Este selector coincide con elementos que no se encuentran establecidos en su argumento, y estos pueden ser cualquier tipo de selector valido en CSS (basicos, de atributos o pseudo-clase), exceptuando los pseudo-elementos o la misma pseudo-clase :not().

li:not(.diferente) {
    /* Selecciona todos los li, excepto los de clase diferente */
}

Como se menciono anteriormente, esta pseudo-clase no se puede anidar pero si encadenar, esto para no hacer la seleccion de multiples elementos. Ejemplo:

li:not(:first-child):not(:last-child) {
    color: #FF5722;
}

Con el anterior selector seleccionamos los elementos <li> excepto el primer y ultimo elemento.

La especificidad de la pseudo-clase :not() es la especificidad de su argumento, por lo tanto esta no aumenta la especificidad del selector, a diferencia de otras pseudo-clases.
Ver ejemplo

Target

La pseudo-clase :target selecciona elementos que son el “target” (objetivo, blanco) de un enlace interno en el documento web. Esta pseudo-clase selecciona un elemento único en el documento web, y este coincide con el #id que sirve como identificador de ruta en una URL.

:target {
  /* estilos */
}
Algunas páginas web contienen enlaces que apuntan a ciertas secciones o elementos en el mismo documento en lugar de apuntar a otras páginas del sitio, estos enlaces apuntan a los elementos de la página que tiene cierta identificación, y que apuntan a ellos mediante el uso de dicho identificador por medio del valor en el atributo href.

Por ejemplo: para acceder al siguiente elemento en un documento web:

<section id="articulo">
    <!-- contenido -->
</section>

Usamos el siguiente identificador:

<a href="#articulo"> Sección interna </a>

Cuando se hace clic en el enlace con el identificador, la URI de la página obtiene lo que se conoce como un identificador de fragmento que identifica dicho elemento en la página. Ejemplo: http://www.dominio.com/#articulo Este elemento objetivo o elemento de destino es el que selecciona la pseudo-clase :target para aplicar los estilos correspondientes.

:target {
    border: 1px solid #FF9800;
    background-color: #FF5722;
}
Ver ejemplo

4
Comentar

avatar
3 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
4 Comment authors
JavierYotmandeivisLinaya Recent comment authors
Nuevos Antiguos Más votados
Linaya
Linaya

Buena guía de los selectores de CSS, gracias por tomar el tiempo para hacerla ya que la mayoría de esto esta en ingles

deivis
deivis

me gusta mucho toda la información que tienes en tu página, pero parece que me voy a volver loco es mucha informacion para aprendersela así no mas, que tanto se necesita saber de css3 para crear diseños web porque yo tengo digamos un nivel intermedio, ya como practica creo paginas web incluso responsive pero cuando estoy hechando codigo no me acuerdo de toda esta informacion, estara mal

Yotman
Yotman

Bueno de hecho no es necesario ir aprendiendo de propiedad en propiedad, solo debes saber su uso y ya, sobre todo en las generales, como margin, padding, border, fonts, etc. Osea las que usas diariamente, sencillamente sin amargarte la vida puedes conseguirte una cheatsheet con todos las propiedades que se usan para css. Yo trabajo de esa forma y me va super bien, cuando no conoces alguna característica de css, la buscas y ya, Mozilla Developer Network es una buena opción, pero como te dije no es necesario, sobre todo si eres programador y te encargas de la parte funcional… Leer más »

Javier
Javier

Muy bueno