¿Cuáles son los tipos de selectores CSS más comunes que debo conocer?

Descubre los selectores CSS más comunes: universal, de tipo, clase, ID, atributo y agrupados, y cómo usarlos para estilizar elementos HTML.

LucusHost, el mejor hosting

Los selectores CSS son patrones que utilizas para «seleccionar» los elementos HTML a los que quieres aplicar estilos. Conocer los más comunes es esencial para trabajar eficientemente con CSS:

  1. Selector Universal (*):
    Selecciona todos los elementos de la página sin excepción. Se usa con precaución, a menudo para aplicar reinicios de estilos básicos.
    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
  2. Selector de Tipo (o Etiqueta):
    Selecciona todos los elementos HTML que coinciden con el nombre de la etiqueta especificada.
    p { /* Selecciona todos los párrafos */
    line-height: 1.5;
    }
    h1 { /* Selecciona todos los encabezados h1 */
    color: #333;
    }
  3. Selector de Clase (.):
    Selecciona todos los elementos que tienen un atributo class con el valor especificado (precedido por un punto). Un elemento puede tener múltiples clases y una clase puede aplicarse a múltiples elementos, lo que los hace muy reutilizables.
    .texto-destacado { /* Selecciona elementos con class="texto-destacado" */
    font-weight: bold;
    color: blue;
    }
  4. Selector de ID (#):
    Selecciona un único elemento que tiene un atributo id con el valor especificado (precedido por una almohadilla). El valor de un id debe ser único en toda la página HTML.
    #menu-principal { /* Selecciona el elemento con id="menu-principal" */
    background-color: lightgray;
    }
  5. Selector de Atributo ([]):
    Selecciona elementos basados en la presencia o el valor de un atributo HTML.
    input[type="submit"] { /* Selecciona inputs con type="submit" */
    background-color: green; color: white;
    }
    a[target="_blank"] { /* Selecciona enlaces que se abren en nueva pestaña */
    text-decoration: none;
    }
  6. Selectores Agrupados (,):
    Permiten aplicar el mismo conjunto de reglas de estilo a múltiples selectores, separándolos por comas.
    h1, h2, h3, h4 {
    font-family: 'Arial', sans-serif;
    color: darkslategray;
    }

Dominar estos selectores te proporcionará una base sólida para estilizar tus páginas web con precisión.

¿Tienes alguna duda o pregunta?Envía el formulario y procuraré darle respuesta
Formulario de pregunta
Responsable » Jose Ramón Bernabeu Guillem. Finalidad » Ponernos en contacto. Legitimación » Tu consentimiento al marcar la casilla verificación. Destinatarios » Los datos que proporciones estarán ubicados en los servidores de LucusHost, proveedor de hosting de este sitio. Derechos » por supuesto tendrás derecho, entre otros, a acceder, rectificar, limitar y suprimir tus datos.
Si creees que esto puede ser de utilidad a alguien más, pues... compártelo que es gratis 🙂
Sitio alojado en un servidor verde según The Green Web Foundation

LucusHost, el mejor hosting

Aviso legal | Condiciones de contratación | Política de privacidad | Política de cookies
© 2017-2025 · Jose R. Bernabeu ·
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram