Si estás empezando a trabajar con CSS, una de las primeras cosas que necesitas aprender es cómo seleccionar correctamente los elementos HTML que quieres modificar.
Seleccionar un elemento por su etiqueta HTML es probablemente la forma más sencilla de aplicar estilos a una página web, ya que puedes modificar de una sola vez todos los párrafos, títulos, enlaces, imágenes o cualquier otro tipo de elemento.
🎯 Este sistema se conoce como selector de tipo, selector de elemento o simplemente selector por etiqueta.
A lo largo de este tutorial vas a aprender cómo funciona, cuál es su sintaxis y cómo puedes combinarlo con otros selectores para conseguir reglas CSS mucho más precisas.
¿Qué significa seleccionar un elemento por etiqueta?
Cuando escribes una página HTML utilizas diferentes etiquetas para definir cada uno de sus elementos.
Por ejemplo, <p> representa normalmente un párrafo, <h2> un encabezado de segundo nivel, <a> un enlace y <img> una imagen.
CSS puede utilizar directamente el nombre de estas etiquetas para localizar los elementos correspondientes y aplicarles determinadas propiedades.
💡 Si escribes un selector utilizando p, por ejemplo, estarás indicando al navegador que debe aplicar esa regla a todos los elementos <p> de la página.
La estructura básica sería la siguiente:
p {
color: black;
}
Con este código, todos los párrafos de la página utilizarán el color negro.
No tienes que utilizar símbolos especiales delante de la etiqueta, algo que diferencia este selector de los selectores de clases o identificadores.
Sintaxis del selector por etiqueta
La sintaxis de un selector de etiqueta CSS es extremadamente sencilla.
Solamente tienes que escribir el nombre de la etiqueta HTML seguido de unas llaves que contienen las propiedades CSS.
etiqueta {
propiedad: valor;
}
Por ejemplo, si quieres cambiar el tamaño de todos los títulos <h2>, puedes utilizar:
h2 {
font-size: 32px;
}
De esta forma, cualquier elemento <h2> existente en la página utilizará un tamaño de fuente de 32 píxeles, salvo que otra regla CSS con mayor especificidad indique lo contrario.
Puedes consultar más información sobre los diferentes tipos de selectores en la documentación de selectores CSS de MDN.
Cómo seleccionar un elemento por etiqueta paso a paso
Seleccionar un elemento mediante su etiqueta solamente requiere que identifiques correctamente el elemento HTML que quieres modificar.
Puedes seguir estos pasos:
- 🔎 Localiza la etiqueta HTML del elemento que quieres personalizar.
- ✏️ Escribe el nombre de la etiqueta dentro de tu archivo CSS o zona de CSS personalizado.
- 🎨 Añade entre llaves las propiedades CSS que quieras aplicar.
- 💾 Guarda los cambios realizados.
- 🌐 Actualiza la página y comprueba que el estilo se ha aplicado correctamente.
Por ejemplo, si quieres cambiar el aspecto de todos los enlaces de una página, puedes seleccionar directamente la etiqueta <a>.
a {
color: blue;
text-decoration: none;
}
Esta regla eliminará el subrayado y establecerá el color azul para todos los enlaces afectados por la regla.
Ejemplos de selectores por etiqueta
Existen multitud de etiquetas HTML que puedes seleccionar directamente mediante CSS.
Si quieres modificar todos los párrafos puedes utilizar:
p {
line-height: 1.7;
}
Si quieres modificar todos los encabezados principales <h1> puedes escribir:
h1 {
font-size: 42px;
}
Para seleccionar todas las imágenes puedes utilizar:
img {
max-width: 100%;
}
Esta última regla es especialmente habitual en diseños adaptables porque evita que una imagen pueda superar el ancho disponible de su contenedor.
También puedes trabajar con listas:
ul {
margin-left: 20px;
}
O modificar los botones HTML:
button {
cursor: pointer;
}
Como puedes comprobar, la lógica siempre es exactamente la misma: escribes el nombre de la etiqueta y defines las propiedades que quieres aplicar.
Tabla resumen de selectores por etiqueta
| Elemento HTML | Selector CSS | ¿Qué selecciona? | Ejemplo de uso |
|---|---|---|---|
| Párrafo | p | Todos los párrafos | Cambiar fuente o interlineado |
| Título principal | h1 | Todos los H1 | Modificar tamaño del título |
| Subtítulo | h2 | Todos los H2 | Cambiar color o márgenes |
| Enlace | a | Todos los enlaces | Modificar color o decoración |
| Imagen | img | Todas las imágenes | Ajustar tamaño |
| Lista | ul | Todas las listas no ordenadas | Cambiar márgenes |
| Elemento de lista | li | Todos los elementos de listas | Modificar espaciado |
| Botón | button | Todos los botones HTML | Cambiar fondo o cursor |
| Tabla | table | Todas las tablas | Modificar bordes |
| Campo de formulario | input | Todos los campos input | Personalizar formularios |
Cómo seleccionar varias etiquetas al mismo tiempo
CSS también permite seleccionar varios tipos de elementos simultáneamente sin tener que repetir las mismas propiedades.
Para hacerlo tienes que separar los diferentes selectores mediante una coma.
h1,
h2,
h3 {
font-family: Arial, sans-serif;
}
Con esta regla estarás aplicando la misma familia tipográfica a todos los elementos <h1>, <h2> y <h3>.
Esta técnica puede ayudarte a mantener una hoja de estilos más limpia y evitar duplicar código innecesariamente.
Por ejemplo:
p,
li {
line-height: 1.6;
}
En este caso tanto los párrafos como los elementos de las listas tendrán el mismo interlineado.
Cómo seleccionar una etiqueta dentro de otro elemento
También puedes combinar el selector por etiqueta con otros selectores para conseguir resultados mucho más específicos.
Imagina que solamente quieres modificar los párrafos que aparecen dentro de un elemento <footer>.
Podrías escribir:
footer p {
font-size: 14px;
}
El espacio existente entre footer y p indica que quieres seleccionar los elementos <p> descendientes de <footer>.
De esta manera, los párrafos situados fuera del footer no recibirán esos estilos.
Otro ejemplo podría ser:
article img {
border-radius: 10px;
}
Esta regla aplicará el borde redondeado únicamente a las imágenes situadas dentro de un elemento <article>.
Puedes profundizar en este comportamiento consultando la documentación sobre el combinador descendiente de CSS.
Diferencia entre seleccionar una etiqueta y una clase
Una duda muy habitual cuando empiezas con CSS es decidir cuándo debes utilizar una etiqueta y cuándo es mejor utilizar una clase.
Un selector de etiqueta afecta normalmente a todos los elementos de ese tipo.
p {
color: gray;
}
Una clase solamente afecta a los elementos en los que hayas añadido esa clase.
.destacado {
color: red;
}
En el HTML podrías aplicarla así:
<p class="destacado">Este párrafo está destacado.</p>
📌 Utiliza un selector por etiqueta cuando quieras definir estilos generales para un determinado tipo de elemento.
📌 Utiliza una clase CSS cuando necesites aplicar un diseño determinado solamente a algunos elementos.
Esta diferencia es especialmente importante cuando trabajas en proyectos grandes, ya que abusar de los selectores de etiquetas puede provocar que modifiques accidentalmente elementos que no querías cambiar.
Combinar una etiqueta con una clase
También puedes seleccionar solamente los elementos de una etiqueta concreta que tengan determinada clase.
Para hacerlo debes escribir ambos selectores juntos y sin espacios.
p.destacado {
font-weight: bold;
}
Este selector afectará únicamente a los elementos <p> que tengan la clase destacado.
Por ejemplo:
<p class="destacado">Este texto recibirá el estilo.</p>
<div class="destacado">Este elemento no.</div>
Aunque ambos elementos tienen la misma clase, la regla p.destacado solamente selecciona el párrafo.
Esta técnica resulta muy útil cuando quieres limitar una clase a determinado tipo de elemento HTML.
Selector por etiqueta y especificidad CSS
Debes tener en cuenta que los selectores por etiqueta tienen una especificidad relativamente baja dentro de CSS.
Por ejemplo:
p {
color: black;
}
.texto-rojo {
color: red;
}
Si un párrafo tiene la clase texto-rojo, generalmente aparecerá en rojo porque el selector de clase tiene mayor especificidad que el selector de etiqueta.
<p class="texto-rojo">Este párrafo será rojo.</p>
Comprender la especificidad te ayudará a solucionar numerosos problemas cuando aparentemente una propiedad CSS no está funcionando.
Puedes consultar cómo calcula el navegador estas prioridades en la documentación sobre especificidad CSS.
Cómo seleccionar etiquetas en WordPress
Si estás utilizando WordPress, estos mismos selectores funcionan exactamente igual porque las páginas que genera WordPress terminan convirtiéndose en HTML que interpreta el navegador.
Por ejemplo, puedes cambiar todos los párrafos utilizando:
p {
font-size: 18px;
}
Sin embargo, aplicar una regla tan general puede modificar párrafos del contenido, footer, cabecera, widgets o incluso determinados elementos creados por plugins.
⚠️ Por este motivo, en WordPress suele ser recomendable añadir un selector adicional para limitar dónde quieres aplicar el cambio.
Por ejemplo:
.entry-content p {
font-size: 18px;
}
De esta manera puedes conseguir que el estilo afecte únicamente a los párrafos situados dentro del contenedor con la clase entry-content, siempre que tu tema utilice dicha clase.
Errores frecuentes al seleccionar elementos por etiqueta
Uno de los errores más habituales consiste en añadir accidentalmente un punto delante del nombre de la etiqueta.
Esto es incorrecto si quieres seleccionar una etiqueta:
.p {
color: red;
}
El selector .p no busca elementos <p>, sino elementos que tengan una clase llamada p.
El selector correcto sería:
p {
color: red;
}
Otro error frecuente consiste en utilizar etiquetas demasiado generales y terminar modificando elementos de otras zonas de la web.
🔧 Si una regla está afectando a demasiados elementos, intenta utilizar selectores descendientes, clases o combinaciones de selectores para limitar su alcance.
Cómo comprobar qué etiqueta utiliza un elemento
Si no sabes qué etiqueta HTML corresponde a determinado elemento de una página web, puedes descubrirlo utilizando las herramientas para desarrolladores del navegador.
En Chrome, Firefox, Edge y otros navegadores modernos puedes hacer clic con el botón derecho sobre un elemento y seleccionar Inspeccionar.
Después podrás ver el código HTML que genera la página e identificar etiquetas, clases e identificadores.
🔍 Esta función es especialmente útil cuando trabajas con WordPress, plugins o constructores visuales, donde muchas veces no conoces de antemano la estructura HTML generada.
Cuándo utilizar un selector por etiqueta
Los selectores por etiqueta son especialmente apropiados cuando quieres establecer estilos generales y coherentes para una web.
Puedes utilizarlos para definir aspectos básicos como tipografías, márgenes, tamaños, colores o comportamientos comunes.
Por ejemplo:
body {
font-family: Arial, sans-serif;
}
p {
line-height: 1.7;
}
img {
max-width: 100%;
}
a {
text-decoration: none;
}
Con unas pocas reglas puedes establecer una base visual para toda la página antes de comenzar a utilizar clases más específicas.
Conclusión
Seleccionar un elemento por etiqueta en CSS consiste simplemente en utilizar el nombre de su etiqueta HTML como selector, por lo que es una de las técnicas más sencillas que puedes aprender.
Si quieres seleccionar todos los párrafos utilizas p, para todos los enlaces utilizas a, para las imágenes utilizas img y para los encabezados puedes utilizar selectores como h1, h2 o h3.
🚀 Cuando necesites mayor precisión puedes combinar estos selectores con clases, identificadores y otros elementos, consiguiendo reglas capaces de modificar exactamente la parte de tu web que necesitas.
Dominar los selectores CSS te permitirá personalizar prácticamente cualquier página web y será una base imprescindible para comprender técnicas más avanzadas de diseño y desarrollo frontend.
