Puede diseñar fácilmente cada elemento que tenga un elemento adyacente justo antes de usar el Selector de hermanos adyacentes (+). El selector de hermanos adyacente se utiliza para seleccionar el elemento que es adyacente o el elemento que está al lado de la etiqueta de selector especificada. Este combinador selecciona solo una etiqueta que está justo al lado de la etiqueta especificada.
Nota: Los selectores se utilizan para seleccionar los elementos HTML en los atributos y el selector hermano adyacente (+) es un tipo de selector. La sintaxis es sencilla, solo dos o más selectores separados por un símbolo más (+) .
Requisito previo: buena comprensión del combinador
Sintaxis:
former_element + target_element { style properties }
Ejemplo 1: el selector de hermanos adyacente solo seleccionará elementos hermanos que siguen directamente a otro elemento hermano. Ambos elementos comparten el mismo padre (centro).
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
}
/* styling the paragraph just after
image tag p elements directly
following after img elements
will be selected Both share
same parent */
img + p {
color: red;
}
img + p + p {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo" />
<p>I'm 1st paragraph after Image</p>
<p>I'm 2nd paragraph after Image</p>
<p>I'm 3rd paragraph after Image</p>
</center>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
h1 {
color: green;
}
div+p {
color: #009900;
font-size: 32px;
font-weight: bold;
margin: 0px;
text-align: center;
}
div {
text-align: center;
}
p {
text-align: center;
}
</style>
</head>
<body>
<center>
<h1>Welcome to GeeksforGeeks</h1>
<div>Adjacent sibling selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</center>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aksrathod07 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA