El selector elemento ~ elemento en CSS se usa para hacer coincidir el segundo elemento si sigue al primero (no es necesario que sea inmediato). Ambos deben tener el mismo elemento principal.
Sintaxis:
element ~ element {
//CSS Property
}
Ejemplo 1: en el programa a continuación, puede ver que «p ~ ul» seleccionará y diseñará solo la segunda lista desordenada que viene después del párrafo y no la primera lista que está sola.
<!DOCTYPE html>
<html>
<head>
<title>
CSS element ~ element Selector
</title>
<style>
p ~ ul {
color:white;
background: green;
}
</style>
</head>
<body style = "">
<h2 style = "color:green; text-align: center;">
CSS element ~ element Selector
</h2>
<div>Searching algorithms</div>
<ul>
<li>Binary search</li>
<li>Linear search</li>
</ul>
<p>Sorting Algorithms</p>
<ul>
<li>Merge sort</li>
<li>Quick sort</li>
</ul>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS element ~ element Selector
</title>
<style>
p ~ span {
color:white;
background: green;
}
</style>
</head>
<body style = "">
<!--<h1 style = "color:green;text-align: center;">-->
<!-- GeeksforGeeks-->
<!--</h1>-->
<h2 style = "color:green; text-align: center;">
CSS element ~ element Selector
</h2>
<span>This is the first span.</span>
<p>This is the first paragraph.</p>
<code>Some code</code>
<span>A computer science </span>
<code>More code.....</code>
<span> portal for geeks.</span>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con element ~ element selector se enumeran a continuación:
- Apple Safari 3.2
- Google Chrome 4.0
- Firefox 3.5
- Ópera 9.6
- Internet Explorer 7.0
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA