En este artículo, aprenderemos sobre el selector contextual en CSS y comprenderemos la sintaxis de declaración con la ayuda de ejemplos de código.
Un selector contextual se define como un selector que considera el contexto donde se va a aplicar el estilo. En palabras simples, el estilo especificado se aplica a un elemento solo si el elemento está en el contexto especificado. El contexto se puede definir como una relación padre/hijo o una relación ascendiente/descendiente entre diferentes partes del documento. Un selector contextual se compone de dos o más selectores simples separados por espacios en blanco. Clase, cualquier tipo, selector de ID se considera como un selector simple.
Descendientes: Coincide con todos los elementos que están contenidos dentro de otro elemento.
Sintaxis:
div {color: red}
p {color: red;}
Para cualquier elemento HTML específico, podemos aplicar la propiedad CSS general que se requiere para diseñar ese elemento. El siguiente código de ejemplo ilustrará el enfoque para aplicar el selector contextual.
Ejemplo: En esto, hay una etiqueta div principal y sus etiquetas p de dos hijos . La etiqueta principal <p> y la etiqueta principal <div> convierten los elementos en rojo a medida que se ejecuta el programa.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contextual Selectors</title>
<style>
div {
color: red;
}
p {
color: red;
}
</style>
</head>
<body>
<div>
<p>Geeks For Geeks</p>
<p>A Computer Science portal for geeks.</p>
</div>
<p>What are Contextual Selectors in CSS?</p>
</body>
</html>
Producción:
Pero suponga que tiene que convertir solo ese párrafo en verde que está debajo de div y no el otro fuera de div. Desea que las etiquetas <p> y <div> permanezcan en rojo para el documento como un todo, pero para los elementos dentro de la etiqueta <div>, debe cambiar la etiqueta <p> a verde. ¿Cómo puedes hacer esto?
Bueno, aquí viene la verdadera importancia del selector contextual.
Sintaxis:
div p{color: green;}
Ejemplo 2: en este ejemplo, cualquier etiqueta <p> que esté dentro de la etiqueta <div> se volverá verde (y no roja como se especificó en la sintaxis anterior). Aquí, la etiqueta <p> se volverá verde solo en el contexto de la etiqueta <div>. Será rojo en todos los demás contextos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Contextual Selectors</title>
<style>
div p {
color: green;
}
</style>
</head>
<body>
<div>
<p>Geeks For Geeks</p>
<p>A Computer Science portal for geeks.</p>
</div>
<p>What are Contextual Selectors in CSS?</p>
</body>
</html>
Producción:
De los ejemplos anteriores, hemos visto cómo se aplica un selector contextual para aplicar estilo a un elemento solo si el elemento está en el contexto especificado.
¡Hola Geeks! No dejes de aprender ahora. Domina todos los conceptos importantes de la programación competitiva con el Diseño Web para Principiantes | Curso HTML.
Publicación traducida automáticamente
Artículo escrito por aditi_codes y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA