El selector elemento1~elemento2 en CSS se usa para hacer coincidir las ocurrencias de elemento2 seguido de elemento1. No es importante el elemento1 seguido inmediatamente por el elemento2. Esta propiedad funciona si ambos elementos tienen un elemento principal común.
Sintaxis:
element1 ~ element2 {
// CSS Property
}
Ejemplo 1: En este ejemplo, ambos elementos tienen el mismo elemento principal (cuerpo).
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS element1~element2 Selector
</title>
<style>
p ~ ul {
background: green;
color:white;
}
</style>
</head>
<body>
<div>
<p>Programming Languages list:</p>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ul>
<div>Computer Science Subjects:</div>
<ul>
<li>Data Structure</li>
<li>Algorithm</li>
<li>Operating System</li>
<li>Computer Networks</li>
</ul>
</div>
</body>
</html>
Producción:
Ejemplo 2: en este ejemplo, ambos elementos no tienen el mismo elemento principal. Por lo tanto, la propiedad CSS no se aplicará.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS element1~element2 Selector
</title>
<style>
p ~ ul {
background: lightgrey;
border: 2px solid green;
}
</style>
</head>
<body>
<p>Programming Languages list:</p>
<div>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ul>
<div>Computer Science Subjects:</div>
<ul>
<li>Data Structure</li>
<li>Algorithm</li>
<li>Operating System</li>
<li>Computer Networks</li>
</ul>
</div>
</body>
</html>
Producción:
Navegadores compatibles: los navegadores compatibles con element1~element2 Selector se enumeran a continuación:
- Google Chrome 4.0
- Internet Explorer 7.0
- Firefox 3.5
- Safari 3.2
- Ópera 9.6
Publicación traducida automáticamente
Artículo escrito por kundankumarjha y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA