Principales selectores

4.1 Selectores por tipo

Los selectores en CSS se utilizan para definir los elementos a los que se aplicarán los estilos. Los principales selectores incluyen selectores por tipo, clase, identificador y selectores universales. Cada uno de estos selectores tiene sus propias características y aplicaciones.

Selectores por tipo (Type Selectors)

Los selectores por tipo aplican estilos a todos los elementos de un tipo determinado. Por ejemplo, se pueden aplicar estilos a todos los párrafos (<p>), encabezados (<h1>, <h2> etc.) u otras etiquetas HTML.

    
      tagname {
        propiedad: valor;
        propiedad: valor;
      }
    
  

    
      p {
        color: blue;
        font-size: 14px;
      }
    
  

Este selector aplicará estilos a todos los elementos <p> en el documento.

Características:

• Se aplica a todos los elementos de un tipo especificado
• Útil para estilos globales que deben aplicarse a todos los elementos de un tipo determinado

4.2 Selectores por clase

Selectores por clase permiten aplicar estilos a uno o varios elementos que tienen una clase específica. Las clases se definen usando el atributo class en HTML y se denotan con un punto (.) en CSS.

Sintaxis:

    
      .classname {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      .button {
        background-color: green;
        color: white;
        padding: 10px;
      }
    
  

Este selector aplicará estilos a todos los elementos que tengan la clase button.

Características:

• Puedes usar la misma clase para varios elementos
• Permite aplicar estilos iguales fácilmente a diferentes elementos

4.3 Selectores por identificador

Los selectores por identificador aplican estilos a un elemento con una identificación única. Las identificaciones se definen con el atributo id en HTML y se denotan con el símbolo de almohadilla (#) en CSS.

Sintaxis:

    
      #uniq-id {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

Este selector aplicará estilos al elemento con el identificador main.

    
      /* Selecciona el elemento con el identificador #main */
      #main {
        width: 800px;
        background: yellow;
      }
    
  

    
      <div id="main">Este elemento tendrá un ancho de 800px.</div>
      <div>Este elemento no será estilizado.</div>
    
  

Características:

• La identificación debe ser única en la página
• Se utiliza para estilizar elementos únicos, como un encabezado o el contenido principal

4.4 Selectores agrupados

Los selectores agrupados permiten aplicar la misma regla a varios elementos. Reducen la cantidad de código y facilitan la gestión de estilos.

Sintaxis:

    
      selector, selector, … {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

    
      /* Selecciona todos los elementos h1, h2 y h3 */
      h1,
      h2,
      h3 {
        font-family: Arial, sans-serif;
      }
    
  

    
      <h1>Encabezado 1</h1>
      <h2>Encabezado 2</h2>
      <h3>Encabezado 3</h3>
      <p>Este texto no será estilizado por esta regla.</p>
    
  

4.5 Selectores universales

Los selectores universales aplican estilos a todos los elementos en la página. Se denotan con un asterisco (*) y pueden ser útiles para restablecer estilos o para aplicar estilos comunes a todos los elementos.

Sintaxis:

    
      * {
        propiedad: valor;
        propiedad: valor;
      }
    
  

Ejemplo:

Este selector aplicará estilos a todos los elementos en la página, restableciendo sus márgenes y estableciendo el modelo de caja.

    
      <div>Párrafo 1</div>
      <div>Párrafo 2</div>
    
  

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

Características:

• Se aplica a todos los elementos en la página
• Útil para restablecimientos globales de estilo o para aplicar estilos básicos a todos los elementos