Selector de niños: El selector de niños se utiliza para hacer coincidir todos los elementos que son hijos de un elemento específico. Da la relación entre dos elementos. El selector elemento > elemento selecciona aquellos elementos que son los hijos del padre específico. El operando del lado izquierdo de > es el padre y el operando de la derecha es el elemento hijo.
Sintaxis:
element > element {
// CSS Property
}
Ejemplo: haga coincidir todos los elementos <p> que son secundarios de solo el elemento <div>.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS child Selector
</title>
<style>
div > p {
color:white;
background: green;
padding:2px;
}
</style>
</head>
<body style = "text-align: center;">
<div>
<h2 style = "color:green;">
CSS Child Selector
</h2>
<p>
A computer science portal for geeks.
</p>
</div>
<p>Geeks Classes is a quick course to cover
algorithms questions.</p>
<p>This paragraph will not be styled.</p>
</body>
</html>
Producción:
Selector de descendientes: el selector de descendientes se utiliza para seleccionar todos los elementos que son secundarios del elemento (no un elemento específico). Selecciona los elementos dentro de los elementos, es decir, combina dos selectores de manera que los elementos que coinciden con el segundo selector se seleccionan si tienen un elemento antepasado que coincide con el primer selector.
Sintaxis:
element element {
// CSS Property
}
Ejemplo: Selecciona todos los elementos <h2> que son elementos secundarios de <div>.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS Descendant Selector
</title>
<style>
div h2 {
font-size:26px;
}
</style>
</head>
<body style = "text-align:center;">
<div>
<h2 style = "color:green;" >
GeeksForGeeks
</h2>
<div>
<h2>GeeksForGeeks</h2>
</div>
</div>
<p>
GeeksforGeeks in green color is
example of child Selector
<br>other GeekforGeeks is example
of descendant Selector
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA