Los combinadores CSS explican la relación entre dos selectores. Los selectores de CSS son los patrones utilizados para seleccionar los elementos con fines de estilo. Un selector CSS puede ser un selector simple o un selector complejo que consta de más de un selector conectado mediante combinadores.
Hay cuatro tipos de combinadores disponibles en CSS que se analizan a continuación:
- Selector general de hermanos (~)
- Selector de hermano adjetivo (+)
- Selector de niños (>)
- Selector de descendientes (espacio)
Selector general de hermanos: el selector general de hermanos se utiliza para seleccionar el elemento que sigue al primer elemento selector y también comparte el mismo padre que el primer elemento selector. Esto se puede utilizar para seleccionar un grupo de elementos que comparten el mismo elemento principal.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
div ~ p{
color: #009900;
font-size:32px;
font-weight:bold;
margin:0px;
text-align:center;
}
div {
text-align:center;
}
</style>
</head>
<body>
<div>General sibling selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
Producción:
Selector de hermanos adyacentes: el selector de hermanos adyacentes 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.
html
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
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>
<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>
</body>
</html>
Producción:
Selector de niños: este selector se usa para seleccionar el elemento que es el niño inmediato de la etiqueta especificada. Este combinador es más estricto que el selector descendiente porque selecciona solo el segundo selector si tiene el primer elemento selector como padre.
html
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
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>
<div>Child selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
Producción:
Selector de descendientes: este selector se utiliza para seleccionar todos los elementos secundarios de la etiqueta especificada. Las etiquetas pueden ser el hijo directo de la etiqueta especificada o pueden estar muy profundas en la etiqueta especificada. Este combinador combina los dos selectores de manera que los elementos seleccionados tienen un ancestro igual que el primer elemento selector.
html
<!DOCTYPE html>
<html>
<head>
<title>Combinator Property</title>
<style>
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>
<div>Descendant selector property</div>
<p>GeeksforGeeks</p>
<div>
<div>child div content</div>
<p>G4G</p>
<p>Descendant selector</p>
</div>
<p>Geeks</p>
<p>Hello</p>
</body>
</html>
Producción:
Navegador compatible:
- Google Chrome
- Internet Explorer (después de IE 7.0)
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por SarthakKhandelwal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA