CSS Selectores

Los selectores en CSS son mecanismos que se utilizan para seleccionar elementos HTML específicos en una página web y aplicar estilos a ellos. Hay varios tipos de selectores en CSS, incluyendo:

  • Selectores de etiqueta: seleccionan elementos HTML basados en su etiqueta, como p para párrafos o h1 para encabezados.
  • Selectores de clase: seleccionan elementos HTML basados en su clase, utilizando un punto (.) seguido del nombre de la clase, como .ejemplo.
  • Selectores de ID: seleccionan elementos HTML basados en su ID, utilizando un signo numeral (#) seguido del nombre del ID, como #principal.
  • Selectores de atributo: seleccionan elementos HTML basados en los valores de sus atributos, como a[href='https://ejemplo.com'] para seleccionar todos los enlaces que apuntan a «https://ejemplo.com«.

Una vez seleccionado los elementos, se pueden aplicar estilos utilizando reglas CSS. Ejemplo:

/* Selecciona todos los elementos <p> y les aplica una fuente de color rojo */ p { color: red; }
Lenguaje del código: CSS (css)
/* Selecciona todos los elementos con clase "destacado" y les aplica un fondo de color amarillo */ .destacado { background-color: yellow; }
Lenguaje del código: CSS (css)
/* Selecciona el elemento con id "principal" y le aplica un tamaño de letra de 24px */ #principal { font-size: 24px; }
Lenguaje del código: CSS (css)
/* Selecciona todos los elementos <a> que apuntan a "https://ejemplo.com" y les aplica un subrayado */ a[href='https://ejemplo.com'] { text-decoration: underline; }
Lenguaje del código: CSS (css)

El código HTML es el marcado o estructura de una página web, mientras que el CSS es empleado para dar estilo a los elementos HTML.

A continuación te proporciono algunos ejemplos de código HTML que utilizan los selectores CSS mencionados anteriormente:

<!DOCTYPE html> <html> <head> <title>Ejemplo de Selectores</title> <style> /* Selector de etiqueta */ p { color: red; } /* Selector de clase */ .destacado { background-color: yellow; } /* Selector de ID */ #principal { font-size: 24px; } /* Selector de atributo */ a[href='https://ejemplo.com'] { text-decoration: underline; } </style> </head> <body> <h1>Ejemplo de Selectores</h1> <p>Este es un párrafo de ejemplo.</p> <p class="destacado">Este es otro párrafo de ejemplo, pero con la clase "destacado".</p> <div id="principal"> <p>Este es un párrafo dentro del div con id "principal".</p> <p>Este es otro párrafo dentro del div con id "principal".</p> </div> <a href="https://ejemplo.com">Este es un enlace de ejemplo.</a> </body> </html>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el primer párrafo tendrá un color de letra rojo debido al selector de etiqueta «p», el segundo párrafo tendrá un fondo amarillo debido al selector de clase «.destacado», el div con id «principal» tendrá un tamaño de letra de 24px debido al selector de id «#principal» y el enlace apuntando a «https://ejemplo.com» tendrá un subrayado debido al selector de atributo «a[href=’https://ejemplo.com‘]».

Ten en cuenta que en este ejemplo, el código CSS se encuentra dentro de la etiqueta <style> en el <head>, pero también se puede colocar en un archivo externo con extensión «.css» y enlazado al documento HTML mediante la etiqueta <link>.

Selector de elementos CSS

El selector de elementos CSS es una de las formas más básicas de seleccionar elementos en una página web. Este selector selecciona elementos HTML basados en su etiqueta, como p para párrafos, h1 para encabezados, etc.

Ejemplo:

/* Selecciona todos los elementos <p> y les aplica una fuente de color rojo */ p { color: red; }
Lenguaje del código: CSS (css)
<p>Este es un párrafo de ejemplo</p> <p>Este es otro párrafo de ejemplo</p>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el selector de elementos es «p», y se aplica el color rojo a todos los elementos <p> en el documento HTML.

Es importante tener en cuenta que el selector de elementos especifica solo el tipo de elemento, y no tiene en cuenta las clases, IDs u otros atributos.

Si quieres seleccionar elementos basados en algo más que su etiqueta, tendrás que usar otros tipos de selectores como el selector de clase, el selector de ID o el selector de atributo.

Selector de ID de CSS

El selector de ID es uno de los selectores más comunes en CSS, este selector selecciona elementos HTML basados en su atributo «id». El selector de ID es específico y solo se aplica a un elemento con un id específico. El selector de ID se representa con un signo numeral (#) seguido del nombre del ID.

Ejemplo:

/* Selecciona el elemento con id "principal" y le aplica un tamaño de letra de 24px */ #principal { font-size: 24px; }
Lenguaje del código: CSS (css)
<div id="principal"> <p>Este es un párrafo dentro del div con id "principal".</p> <p>Este es otro párrafo dentro del div con id "principal".</p> </div>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el selector de ID es «#principal» y se aplica el tamaño de letra 24px solo al elemento con id «principal» en el documento HTML.

Es importante tener en cuenta que los IDs deben ser únicos en una página, y no deben ser utilizados varias veces en un documento HTML. Si deseas aplicar estilos a varios elementos con características similares, es mejor usar selectores de clase.

Selector de clases CSS

El selector de clases es otro de los selectores más comunes en CSS. Este selector selecciona elementos HTML basados en su atributo «class». El selector de clase se utiliza para aplicar estilos a varios elementos con características similares en una página web. El selector de clase se representa con un punto (.) seguido del nombre de la clase.

Ejemplo:

/* Selecciona todos los elementos con clase "destacado" y les aplica un fondo de color amarillo */ .destacado { background-color: yellow; }
Lenguaje del código: CSS (css)
<p>Este es un párrafo de ejemplo.</p> <p class="destacado">Este es otro párrafo de ejemplo, pero con la clase "destacado".</p> <p class="destacado">Este es otro párrafo de ejemplo, también con la clase "destacado".</p>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el selector de clase es «.destacado», y se aplica el fondo amarillo a todos los elementos con clase «destacado» en el documento HTML.

Es importante tener en cuenta que un elemento puede tener varias clases, y una clase puede ser utilizada en varios elementos. Los selectores de clase se aplican a cualquier elemento que tenga la clase especificada, independientemente de su etiqueta.

Selector universal de CSS

El selector universal es un selector CSS especial que se utiliza para seleccionar todos los elementos en una página web. El selector universal se representa con un asterisco (*).

Ejemplo:

/* Aplica un borde a todos los elementos en el documento */ * { border: 1px solid black; }
Lenguaje del código: CSS (css)
<h1>Ejemplo de Selector Universal</h1> <p>Este es un párrafo de ejemplo.</p> <ul> <li>Elemento 1</li> <li>Elemento 2</li> </ul>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el selector universal es «*», y se aplica un borde a todos los elementos en el documento HTML.

Es importante tener en cuenta que el selector universal tiene una prioridad menor a los selectores específicos, por lo tanto, si un estilo especifico se aplica a un elemento también seleccionado por el selector universal, este ultimo será ignorado.

Además, el selector universal se utiliza con moderación, ya que se aplica a todos los elementos en una página, y puede causar un rendimiento innecesariamente bajo, y puede dificultar la depuración y el mantenimiento del código.

IMPORTANTE:

El selector universal es una herramienta poderosa, pero debe ser utilizado con precaución. Es importante tener en cuenta que al usarlo, se está aplicando el estilo a todos los elementos en la página, lo que puede ser innecesario y puede causar problemas de rendimiento y de legibilidad del código.

En lugar de utilizar el selector universal, es recomendable utilizar selectores más específicos para seleccionar solo los elementos que deseas estilizar. Esto ayudará a mantener tu código limpio, legible y fácil de mantener.

Otra cosa importante de mencionar es que, el selector universal se utiliza para dar estilos globales a la página, si se usa en conjunto con selectores específicos, se puede tener un mayor control sobre los estilos aplicados.

Selector de agrupación CSS

El selector de agrupación es un selector CSS que permite seleccionar varios elementos al mismo tiempo. El selector de agrupación se representa con varios selectores separados por comas.

Ejemplo:

/* Selecciona todos los elementos <h1>, <h2> y <h3> y les aplica un color de letra azul */ h1, h2, h3 { color: blue; }
Lenguaje del código: CSS (css)
<h1>Encabezado 1</h1> <h2>Encabezado 2</h2> <h3>Encabezado 3</h3> <p>Este es un párrafo de ejemplo.</p>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, el selector de agrupación es «h1, h2, h3», y se aplica el color azul a todos los elementos <h1>, <h2> y <h3> en el documento HTML.

Es importante tener en cuenta que el selector de agrupación se utiliza para aplicar estilos a varios elementos a la vez, sin necesidad de escribir varias líneas de código. Esto puede ser útil para aplicar estilos a elementos que comparten características similares, pero que no tienen una clase o ID común.

Además, es importante recordar que los selectores de agrupación tienen una prioridad menor a los selectores específicos, si un estilo específico se aplica a un elemento también seleccionado por el selector de agrupación, este último será ignorado.

Más ejemplos de selectores en CSS

Aquí te proporciono algunos ejemplos adicionales de selectores CSS y código HTML que los utilizan:

  • Selector de hijo: selecciona elementos HTML que son hijos directos de un elemento específico. Ejemplo:
/* Selecciona todos los <li> que son hijos directos de un <ul> */ ul > li { background-color: lightgray; }
Lenguaje del código: CSS (css)
<ul> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> <li> <ul> <li>Sub-elemento 1</li> <li>Sub-elemento 2</li> </ul> </li> </ul>
Lenguaje del código: HTML, XML (xml)
  • Selector de hermano: selecciona elementos HTML que tienen el mismo padre y vienen después de un elemento específico. Ejemplo:
/* Selecciona todos los <p> que vienen después de un <h2> */ h2 + p { color: blue; }
Lenguaje del código: CSS (css)
<h2>Encabezado</h2> <p>Párrafo 1</p> <p>Párrafo 2</p> <p>Párrafo 3</p>
Lenguaje del código: HTML, XML (xml)
  • Selector de atributo: selecciona elementos HTML que tienen un atributo específico con un valor específico. Ejemplo:
/* Selecciona todos los elementos <input> con tipo "password" */ input[type='password'] { border: 1px solid red; }
Lenguaje del código: CSS (css)
<label>Usuario: <input type="text" name="username"></label> <br> <label>Contraseña: <input type="password" name="password"></label>
Lenguaje del código: HTML, XML (xml)
  • Selector de pseudo-clase: selecciona elementos HTML en un estado específico, como el hover o el focus. Ejemplo:
/* Selecciona todos los <a> cuando el cursor está sobre ellos */ a:hover { text-decoration: underline; }
Lenguaje del código: CSS (css)
<a href="#">Enlace 1</a> <a href="#">Enlace 2</a> <a href="#">Enlace 3</a>
Lenguaje del código: HTML, XML (xml)

Espero que estos ejemplos te ayuden a entender mejor cómo funcionan los selectores CSS y cómo utilizarlos en tu código HTML.