Latest web development tutorials

Una combinación de selectores CSS

Una combinación de selectores CSS

nota selectores de combinación ilustran la relación directa entre los dos selectores.

selectores CSS incluyen una combinación de diversas combinaciones de selectores simples.

En CSS 3 que contiene cuatro combinaciones:

  • selector de descendiente (separados por espacios)
  • selector de elemento hijo (mayor de delimitado)
  • selector de hermanos adyacentes (más delimitado)
  • selector de Hermano ordinaria (separados por un guión)

Selector de la descendencia

selector de descendiente coincide con todos los elementos de los elementos descendientes dignos.

El siguiente ejemplo selecciona todos los elementos <p> en el elemento <div>:

Ejemplos

div p
{
background-color:yellow;
}

Trate »


selectores de hijos

En comparación con los selectores de descendientes, sub-selectores (selectores niño) puede seleccionar un elemento como un elemento hijo del elemento.

Los siguientes ejemplos seleccionados <div> en todos los elementos secundarios directos <p>:

Ejemplos

div>p
{
background-color:yellow;
}

Trate »


Selector de hermanos adyacentes

selector de hermanos adyacentes (selector de hermanos adyacentes) elegir otro elemento inmediatamente después del elemento, y ambos tienen el mismo elemento padre.

Si usted necesite seleccionar otro elemento inmediatamente después del elemento, y ambos tienen el mismo elemento padre, se puede utilizar el selector de hermanos adyacentes (selector de hermanos adyacentes).

El ejemplo siguiente selecciona todo el primero de ellos en el elemento <div> después de que el elemento <p>:

Ejemplos

div+p
{
background-color:yellow;
}

Trate »


Ordinarias Selectores de hermanos adyacentes

selector de hermanos adyacentes común para seleccionar todos los elementos relacionados especificados.

El siguiente ejemplo selecciona todos los elementos <div> de todos los hermanos adyacentes <p>:

Ejemplos

div~p
{
background-color:yellow;
}

Trate »