¿Estás buscando una forma eficiente de agrupar y anidar selectores en tu código CSS? ¡No busques más! Los selectores de agrupación y anidamiento son herramientas útiles que pueden simplificar y mejorar tu trabajo como diseñador web. En este artículo, exploraremos todo lo que necesitas saber sobre estos selectores y cómo usarlos efectivamente en tus proyectos web. ¡No te lo pierdas!
A medida que desarrolla su estructura CSS, puede darse cuenta de que, en muchos casos, necesita aplicar los mismos estilos a diferentes elementos en sus páginas HTML. Además, es bastante común que necesite aplicar estilos únicos a elementos específicos.
En algunos casos, estos elementos pueden ser elementos que son dentro de los elementos principales usted está tratando de apuntar. Aquí es donde puede aprovechar la capacidad de combinar y/o anidar selectores.
Combinación de selectores
Este ejemplo muestra cómo puede agrupar todos los elementos de encabezado y aplicar la misma propiedad y valores. Cada seleccionador es separados por una coma. en el caso de la font-family propiedad, te darás cuenta tres valores.
Si el el navegador del usuario no es compatible el primer valor, intentará aplicar el segundo. Si el segundo no es compatible, continuará a través de la lista de valores especificados.
h1, h2, h3, h4, h5, h6 {
color: #blue;
font-family: Arial, Verdana, sans-serif;
}Selectores de anidamiento
Es posible aplicar un estilo para un selector dentro de un selector. Por ejemplo, supongamos que desea diseñar solo los hipervínculos dentro párrafo elementos, puede hacerlo apuntando a esos selectores específicos.
En el siguiente ejemplo, estamos aplicando un estilo a los hipervínculos. dentro de un elemento padre de párrafo. En su archivo HTML, cuando agrega hipervínculos dentro de un elemento de párrafo, esos hipervínculos tendrán estilo.
p a {
color:red;
}En su archivo HTML, crear un elemento de párrafo, luego agregue sus hipervínculos. Solo a esos hipervínculos se les aplicará este estilo. Aviso que el hipervínculo fuera del elemento de párrafo no tendrá estilo.
Copie y pegue el siguiente código en nuestro Editor HTML para que pueda probarlo usted mismo.
<html>
<head>
<style type="text/css">
p a {
color:red;
}
</style>
</head>
<body>
<p>
This is a <a href="https://www.itgeared.com">link</a> within a paragraph element.
</p>
<span>
This is a <a href="https://www.itgeared.com">link</a> within a span element.
</span>
</body>
</html>