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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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)