03-Selectores en css

---

Selectores CSS

• Selector de Elemento
• Selector de ID
• Selector de Clase
• Selector Universal
• Selector de Agrupación
• Todos los Selectores Simples

---

Selector de Elemento

Un selector de CSS se utiliza para seleccionar uno o varios elementos HTML y aplicarles un estilo específico. El selector de elemento, en particular, selecciona todos los elementos HTML de un tipo específico en función de su nombre, como p para los párrafos o h1 para los encabezados.

Los selectores CSS se organizan en cinco categorías principales:

• Seleccionadores simples: seleccionan elementos en función del nombre, ID o clase.
• Selectores de Combinador: seleccionan elementos basados en una relación específica entre ellos.
• Seleccionadores de pseudoclase: seleccionan elementos basados en un estado particular, como :hover.
• Seleccionadores de pseudoelementos: seleccionan y estilizan una parte de un elemento, como el primer carácter o línea.
• Seleccionadores de atributos: seleccionan elementos basados en un atributo específico o su valor.

El selector de elemento es uno de los selectores CSS más básicos. Permite seleccionar todos los elementos de un tipo y aplicarles un estilo común, como alinear texto o cambiar el color.

Ejemplo:

p {
    text-align: center;
    color: red;
}
        

En este ejemplo, todos los elementos <p> en la página estarán alineados al centro y tendrán un color de texto rojo. Este selector aplica el estilo de manera uniforme a todos los elementos de ese tipo dentro del documento.

---

...

Selector de ID

El selector de ID en CSS se utiliza para seleccionar y aplicar estilos a un único elemento HTML que tenga un atributo id específico. En HTML, cada valor de id debe ser único en toda la página, lo que hace que el selector de ID sea ideal para estilos que deben aplicarse a un solo elemento.

Para utilizar el selector de ID en CSS, se coloca el símbolo de almohadilla (#) seguido del nombre del ID. Este tipo de selector tiene una alta especificidad, lo que significa que si existen otros estilos aplicados al mismo elemento, el estilo con ID tendrá prioridad.

Ejemplo:

#miElemento {
    background-color: yellow;
    font-size: 20px;
    padding: 10px;
}
        

En este ejemplo, el estilo se aplicará solo al elemento HTML con el id="miElemento". Este elemento tendrá un fondo amarillo, una fuente de 20 píxeles y un relleno de 10 píxeles. Otros elementos en la página no se verán afectados por este estilo, a menos que compartan el mismo id, lo cual no es recomendable.

La buena práctica en CSS y HTML recomienda que cada id sea único dentro de la página para evitar conflictos de estilo y mantener la accesibilidad y estructura del documento.

---

Selector de Clase

El selector de clase en CSS permite seleccionar y aplicar estilos a uno o varios elementos HTML que comparten un mismo atributo de class. A diferencia del selector de ID, el selector de clase puede aplicarse a múltiples elementos, lo cual es útil para estilizar varios elementos de forma consistente en una página.

Para utilizar el selector de clase en CSS, se coloca un punto (.) seguido del nombre de la clase. Este selector tiene una especificidad menor que el selector de ID, pero permite una gran flexibilidad, ya que múltiples elementos pueden compartir la misma clase y, además, un elemento puede tener varias clases.

Ejemplo:

.miClase {
    color: blue;
    font-size: 18px;
    margin: 10px;
}
        

En este ejemplo, el estilo se aplicará a todos los elementos HTML que tengan la clase miClase. Estos elementos tendrán un texto en color azul, una fuente de 18 píxeles y un margen de 10 píxeles.

Es importante notar que un elemento HTML puede tener múltiples clases al mismo tiempo, separadas por espacios en el atributo class. Por ejemplo:

<div class="miClase otraClase">Contenido</div>
        

Este div heredará los estilos de ambas clases, miClase y otraClase. Esta capacidad de aplicar múltiples clases a un solo elemento facilita la personalización y reutilización de estilos.

---

Selector Universal

El selector universal en CSS se representa con el asterisco (*) y permite seleccionar todos los elementos de una página. Es útil cuando se desea aplicar un estilo global a todos los elementos sin necesidad de especificar cada uno.

Este selector es comúnmente utilizado para restablecer o normalizar el estilo de todos los elementos de una página. Dado que el selector universal afecta a todos los elementos, es recomendable usarlo con precaución, ya que puede afectar el rendimiento si se aplica en hojas de estilo complejas.

Ejemplo:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
        

En este ejemplo, el selector universal elimina los márgenes y rellenos de todos los elementos y establece la propiedad box-sizing en border-box, lo que facilita el control del tamaño de los elementos al incluir bordes y rellenos en el cálculo de su ancho y altura.

Este tipo de uso del selector universal es habitual al iniciar un proyecto, para asegurar que todos los elementos comiencen con un estilo consistente, eliminando así los estilos predeterminados de cada navegador.

---

Selector de Agrupación

El selector de agrupación en CSS permite aplicar el mismo conjunto de estilos a varios elementos al mismo tiempo. En lugar de escribir una regla CSS separada para cada elemento, el selector de agrupación permite listar varios selectores separados por comas, aplicando el mismo estilo a todos ellos. Esto ayuda a reducir la cantidad de código y mejora la eficiencia y legibilidad de la hoja de estilos.

Para usar el selector de agrupación, simplemente se enumeran los selectores separados por comas. Los estilos especificados se aplicarán a todos los elementos que coincidan con cualquiera de los selectores de la lista.

Ejemplo:

h1, h2, p {
    color: green;
    font-family: Arial, sans-serif;
}
        

En este ejemplo, los elementos h1, h2 y p tendrán el texto en color verde y utilizarán la fuente Arial. Esta técnica de agrupación permite aplicar estilos comunes a múltiples elementos de forma sencilla.

El selector de agrupación es especialmente útil para mantener la consistencia de diseño en diferentes elementos que comparten características similares, sin duplicar reglas CSS, lo que reduce el tamaño del archivo CSS y simplifica su mantenimiento.

---

Todos los Selectores Simples

Los selectores simples en CSS son la base para seleccionar elementos HTML y aplicarles estilos. Se dividen principalmente en tres categorías: el selector de elemento, el selector de clase y el selector de ID. Cada uno tiene su propio propósito y nivel de especificidad, permitiendo a los desarrolladores controlar cómo se aplican los estilos en una página.

1. Selector de Elemento

El selector de elemento se utiliza para seleccionar todos los elementos de un tipo específico. Por ejemplo, el selector p se aplica a todos los párrafos en la página:

p {
    color: blue;
}
        

2. Selector de Clase

El selector de clase se utiliza para seleccionar elementos que tienen un atributo de clase específico. Este selector es versátil, ya que permite aplicar estilos a múltiples elementos al mismo tiempo:

.miClase {
    font-size: 16px;
}
        

3. Selector de ID

El selector de ID se utiliza para seleccionar un elemento específico que tiene un atributo de id. Este selector tiene una alta especificidad, lo que significa que tiene prioridad sobre los selectores de clase y de elemento:

#miElemento {
    background-color: yellow;
}
        

4. Selector Universal

El selector universal (*) selecciona todos los elementos en un documento. Es útil para aplicar estilos globales, aunque debe usarse con cuidado para no afectar el rendimiento:

* {
    box-sizing: border-box;
}
        

5. Selector de Agrupación

El selector de agrupación permite aplicar el mismo estilo a múltiples elementos al mismo tiempo, lo que ayuda a mantener el código limpio y organizado:

h1, h2, h3 {
    margin-bottom: 10px;
}
        

Estos selectores simples forman la base del CSS y son esenciales para el diseño y la presentación de cualquier sitio web. Al comprender y utilizar estos selectores de manera efectiva, los desarrolladores pueden crear estilos más coherentes y mantenibles.

Tabla de Selectores Simples

Selector	Ejemplo	Descripción del Ejemplo
#id	#firstname	Selecciona el elemento con id="firstname"
.class	.intro	Selecciona todos los elementos con class="intro"
*	*	Selecciona todos los elementos
element	p	Selecciona todos los <p> elementos
element,element,..	div, p	Selecciona todos los <div> elementos y todos los <p> elementos

---

Ir al índice

---

---