Combinador general de hermanos: el combinador general de hermanos selecciona el elemento que sigue al primer elemento selector y también comparte el mismo padre que el primer elemento selector. Este combinador se puede utilizar para seleccionar un grupo de elementos que comparten el mismo elemento principal.
Sintaxis:
former_element ~ target_element {
// CSS styles
}
Nota: Former_element y target_element son dos elementos HTML diferentes.
Ejemplo 1: En este ejemplo, estamos creando un elemento div HTML . Estamos agregando dos elementos ( div y elementos de párrafo ), y después de cerrar el elemento div principal , estamos agregando un elemento de párrafo. Estamos usando el combinador general de hermanos para elementos div y de párrafo para agregarle estilos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
What is the General Sibling Combinator ?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div~p {
color: #009900;
font-size: 24px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>What is the General Sibling Combinator?</h3>
<div>
<div>Div Content 2</div>
<p>Paragraph Content 1</p>
</div>
<p>Paragraph Content 2</p>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, estamos creando tres elementos hermanos <h4> , <p> y <div> . Después de eso, usamos el combinador general de hermanos para seleccionar los elementos y aplicarles algunos estilos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
What is the General Sibling Combinator ?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
h4 ~ p {
color: #009900;
font-size: 24px;
}
h4 ~ div {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>What is the General Sibling Combinator?</h3>
<h4>Heading 4 Content</h4>
<p>Paragraph Content</p>
<div>Div Content</div>
</body>
</html>
Producción:
