Manual de selectores CSS

Selector de CSS

Los selectores de CSS se utilizan para "encontrar" (o seleccionar) los elementos HTML que deseas estilizar.

Usa nuestro probador de selectores de CSS para demostrar diferentes selectores.

Selector simple de CSS

Los selectores simples seleccionan elementos basados en el nombre del elemento, id y clase. Además, hay selectores genéricos (*)

Selector Ejemplo Descripción del ejemplo
elemento p Elegir todos los elementos <p>.
#id #firstname Elegir el elemento con id="firstname".
* * Elegir todos los elementos.
.class .intro Elegir todos los elementos con class="intro".

Selector de atributo de CSS

Los selectores de atributo de CSS seleccionan elementos HTML que tienen un conjunto dado de atributos.

Selector Ejemplo Descripción del ejemplo
[attribute] [target] Elegir todos los elementos que tengan el atributo target.
[attribute=value] [target=_blank] Elegir todos los elementos que tengan el atributo target="_blank".
[attribute~=value] [title~=flower] Elegir todos los elementos que tengan el atributo title que contenga la palabra "flower".
[attribute|=value] [lang|=en] Elegir todos los elementos que tengan el valor de atributo lang que comienza con "en".
[attribute^=value] a[href^="https"] Elegir cada elemento <a> que tenga su atributo href que comienza con "https".
[attribute$=value] a[href$=".pdf"] Elegir cada elemento <a> que tenga su atributo src que termina en ".pdf".
[attribute*=value] a[href*="codew3c"] Elegir cada elemento <a> que tenga el subcadena "abc" en el valor de su atributo href.

Selector de elección anidado de CSS

Selector Ejemplo Descripción del ejemplo
& & Aplicar estilos a un elemento en el contexto de otro elemento