Un selector de tipo (a veces denominado selector de tipo de elemento) hace coincidir elementos con el nombre de nodo de elemento correspondiente, como
, y etiquetas. Los selectores de tipo se utilizan generalmente para realizar cambios de "trazo amplio" en el estilo de un sitio.
p ( /* "p" is the type selector */ margin: 0 0 1em 0; )Uso común
A menudo, los selectores de tipo se establecen como valores predeterminados, como en un restablecimiento de CSS, donde la intención es anular los valores predeterminados del navegador. Un ejemplo de la primera línea de normalize.css, un popular restablecimiento de CSS:
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary ( display: block; )Los selectores de tipo anteriores configuran la propiedad de visualización de esas etiquetas para que se bloqueen, de modo que cada vez que se usen esas etiquetas en todo el sitio, se mostrarán como bloque a menos que se sobrescriban con un estilo más específico.
Mejores prácticas
En general, se considera una mala práctica aplicar cambios de detalles finos solo con un selector de tipo. Por ejemplo, la aplicación de una propiedad “color: white” de manera generalizada a todas las etiquetas rara vez sería algo de utilidad en cualquier sitio. Esto se debe a que las etiquetas son genéricas y se utilizan en todos los sitios para diversos fines.
Sin embargo, con un selector de tipo como body ( ), establecer un valor predeterminado font-size y line-heightes común. Esto se debe en parte al hecho de que solo puede haber una etiqueta en una página determinada, por lo que hay menos oportunidades de conflictos.
Especificación y rendimiento del selector de tipo
Los selectores de tipo están en el nivel más bajo de la cascada de especificidad (generalmente escrito como 0, 0, 0, 1), lo que significa que casi cualquier cosa anulará el estilo aplicado a través de un selector de tipo solo, y agregará un selector de tipo a una clase o ID en su CSS proporciona una especificidad extra mínima.
Los selectores de tipo también tienen una clasificación más baja en la escala de eficiencia de CSS que las clases y los ID. Por lo tanto, es técnicamente una mejor opción de rendimiento utilizar una clase o una ID en lugar del selector de tipo más genérico (aunque la diferencia de velocidad real suele ser insignificante).
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | Alguna | Alguna | Alguna | Alguna | Alguna | Alguna |