DEV Community

Fernando Barrios - jfergt
Fernando Barrios - jfergt

Posted on • Originally published at jfbarrios.com on

Los 10 selectores de CSS que debes conocer

Los selectores de CSS se utilizan para seleccionar y diseñar elementos HTML en una página web. Son la piedra angular de CSS y son esenciales para crear páginas web dinámicas y visualmente atractivas. Hay numerosos selectores de CSS disponibles, pero los siguientes 10 son los ms utilizados:

Selector de elementos

El selector de elementos selecciona elementos en función de su nombre de etiqueta. Por ejemplo, para añadir estilos a todos los elementos h1, usara el siguiente código CSS:

h1 {
    color: blue;
}

Enter fullscreen mode Exit fullscreen mode

Selector de clase

El selector de clase selecciona elementos en función de su atributo de clase. Las clases se indican con un punto (.) en el código CSS, seguido del nombre de la clase. Por ejemplo, para añadir estilos a todos los elementos con la clase " highlight", usara el siguiente código CSS:

.highlight {
    background-color: yellow;
}

Enter fullscreen mode Exit fullscreen mode

Selector de ID

El selector de ID selecciona elementos en función de su atributo de ID. Los ID se indican con un hash (#) en el código CSS, seguido del nombre del ID. Los ID son exclusivos de una página y solo se pueden usar una vez. Por ejemplo, para añadir estilos a el elemento con el ID " header", usara el siguiente código CSS:

#header {
    background-color: gray;
}

Enter fullscreen mode Exit fullscreen mode

Selector universal

El selector universal selecciona todos los elementos de una página. Se indica con un asterisco (*) en el código CSS. Por ejemplo, para añadir estilos a todos los elementos de una página con la fuente "Arial", usara el siguiente código CSS:

* {
    font-family: Arial;
}

Enter fullscreen mode Exit fullscreen mode

Selector de atributos

El selector de atributos selecciona elementos en función de sus atributos y valores de atributos. Por ejemplo, para añadir estilos a todos los elementos "input" con un atributo " type" igual a " send", usara el siguiente código CSS:

input[type="send"] {
    background-color: green;
}

Enter fullscreen mode Exit fullscreen mode

Selector de hermanos adyacentes

El selector de hermanos adyacentes selecciona un elemento que está directamente después de otro elemento. El selector se indica con un signo ms (+) en el código CSS. Por ejemplo, para añadir estilos a un elemento de tipo párrafo que esta inmediatamente después de un elemento h2, usara el siguiente código CSS:

h2 + p {
    font-size: 18px;
}

Enter fullscreen mode Exit fullscreen mode

Selector de descendientes

El selector de descendientes (sin importar el nivel de descendencia) selecciona elementos que son descendientes de un elemento especificado. Los descendientes son elementos que están anidados dentro de otro elemento. Por ejemplo, para añadir estilos a todos los elementos de "span" dentro de un párrafo, usara el siguiente código CSS:

p span {
    color: red;
}

Enter fullscreen mode Exit fullscreen mode

Selector de niños (child)

El selector de niños (child) selecciona elementos que son descendientes directos de un elemento específico. Los elementos secundarios son elementos que están anidados directamente dentro de otro elemento. Por ejemplo, para añadir estilos solo a los elementos de la lista de primer nivel dentro de una lista desordenada, usara el siguiente código CSS:

ul > li {
    background-color: lightblue;
}

Enter fullscreen mode Exit fullscreen mode

Selector de pseudoclase

El selector de pseudoclase selecciona elementos en función de su estado o ubicación. Por ejemplo, para añadir estilos a todos los enlaces que han sido visitados, usara el siguiente código CSS:

a:visited {
    color: purple;
}

Enter fullscreen mode Exit fullscreen mode

Selector de pseudoelementos

El selector de pseudoelementos selecciona una parte específica de un elemento. Por ejemplo, para aplicar estilo a la primera letra de un párrafo, usara el siguiente código CSS:

p::first-letter {
    font-size: 36px;
}

Enter fullscreen mode Exit fullscreen mode

En conclusión, estos 10 selectores de CSS son los ms utilizados y forman la base para diseñar páginas web. Comprender y dominar estos selectores es un paso esencial para convertirse en un desarrollador web experto.

Top comments (0)