Saltar al contenido

¿Qué significa el selector de CSS “+” (signo más)?

Si te encuentras con alguna parte que no comprendes puedes dejarlo en los comentarios y haremos todo lo posible de ayudarte lo mas rápido que podamos.

Solución:

Consulte los selectores adyacentes en W3.org.

En este caso, el selector significa que el estilo se aplica solo a los párrafos que siguen directamente a otro párrafo.

Una llanura p selector aplicaría el estilo a cada párrafo de la página.


Esto solo funcionará en IE7 o superior. En IE6, el estilo no se aplicará a ningún elemento. Esto también vale para el > combinador, por cierto.

Consulte también la descripción general de Microsoft para la compatibilidad de CSS en Internet Explorer.

Es el selector de hermanos adyacentes.

Del blog Splash of Style.

Para definir un selector adyacente de CSS, se utiliza el signo más.

h1+p color:blue;

El código CSS anterior formateará el primer párrafo después (no dentro) de cualquier encabezado h1 como azul.

h1>p selecciona cualquiera p elemento que es un hijo directo (primera generación) (dentro) de un h1 elemento.

  • h1>p partidos

    (

    en el interior

    )

h1+p seleccionará el primero p elemento que es un hermano (en el mismo nivel del dom) como un h1 elemento.

  • h1+p partidos

    (

    junto a/después

    )

Él + signo significa seleccionar un “hermano adyacente”

Por ejemplo, este estilo se aplicará a partir del segundo

:

p + p 
   font-weight: bold;
 

Paragraph 1

Paragraph 2


Ejemplo

Vea este JSFiddle y lo entenderá: http://jsfiddle.net/7c05m7tv/ (Otro JSFiddle: http://jsfiddle.net/7c05m7tv/70/)


Compatibilidad con navegador

Los selectores de hermanos adyacentes son compatibles con todos los navegadores modernos.


Aprende más

  • http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
  • http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

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