CSS combinadores

CSS combinadores : Aquí, vamos a aprender acerca de los combinadores en CSS (Cascading Style Sheet) con ejemplos .

combinadores en CSS se utilizan para explicar una relación entre dos selectores. Un selector puede ser simple a lo complejo y podemos combinar cualquiera de los dos selectores través combinador.

Hay cuatro combinadores diferentes en CSS ,

  1. selector general de hermanos ( ~ )
  2. selector de hermanos adyacentes ( + )
  3. selector de hijo

  4. (> )
  5. selector de descendiente ( espacio )

Vamos a entender estos combinadores uno por uno …

1) selector general de hermanos (~)

se denota por ~ . El selector de hermanos en general como su nombre indica es útil para seleccionar los elementos que son el hermano de un elemento especificado. Esto también se puede utilizar para seleccionar los elementos que comparten el mismo elemento padre.

Sintaxis:

    element1 ~ element2{
//CSS styling
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
font-weight: bold;
background-color: #f40;
color: #fff;
font-size: 32px;
}
</style>
</head>
<body>
<p>A</p>
<div>
<p>B</p>
</div>
<p>C</p>
<p>D</p>
</body>
</html>

salida

CSS Combinators - 4

En el ejemplo anterior, dos & lt; p & gt; se seleccionan es decir “C” y “D” porque son un hermano a elemento especificado & lt; div & gt; .

2) selector de hermanos adyacentes (+)

Se denota por + . Como su nombre indica selector de hermanos adyacentes se utiliza para seleccionar el elemento que es adyacente a un elemento especificado. Este combinador sólo selecciona un elemento que está al lado de una etiqueta especificada.

Sintaxis:

    element1 + element2{
//CSS styling
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div + p {
font-weight: bold;
background-color: #f40;
color: #fff;
font-size: 32px;
}
</style>
</head>
<body>
<p>A</p>
<div>
<p>B</p>
</div>
<p>C</p>
<p>D</p>
</body>
</html>

salida

salida

CSS Combinators - 5

En el ejemplo anterior, la & lt; p & gt; es decir “C” se selecciona ya que es un hermano para el elemento especificado & lt; div & gt; .

3) Selector de Niños (>)

Se denota por > . El selector de niño selecciona todos los elementos que son hijos de un elemento especificado. Se puede seleccionar más de un elemento.

Sintaxis:

    element1 > element2{
//CSS styling
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div > p {
font-weight: bold;
background-color: #f40;
color: #fff;
font-size: 32px;
}
</style>
</head>
<body>
<p>A</p>
<div>
<p>B</p>
</div>
<p>C</p>
<p>D</p>
</body>
</html>

salida

CSS Combinators - 6

En el ejemplo anterior & lt; p & gt; elemento seleccionado ya que es un hijo del elemento especificado & lt; div & gt; .

4) Descendiente selector (espacio)

Se denota por espacio entre dos elementos . Los selecciona selectores descendientes todos los elementos que son descendiente de un elemento especificado. Este combinador es útil para combinar los dos selectores tales que los elementos seleccionados tienen un antepasado el mismo que el primer elemento selector.

Sintaxis:

    element1  element2 {
//CSS styling
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
div p {
font-weight: bold;
background-color: #f40;
color: #fff;
font-size: 32px;
}
</style>
</head>
<body>
<p>A</p>
<div>
<p>B</p>
</div>
<p>C</p>
<p>D</p>
</body>
</html>

salida

CSS Combinators - 7

En el ejemplo anterior & lt; p & gt; se selecciona debido a que es un descendiente de elemento especificado & lt; div & gt; .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *