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

Por ejemplo:

p + p { /* Some declarations */ } 

No sé lo que significa el + . ¿Cuál es la diferencia entre esto y simplemente definir un estilo para p sin + p ?

Este selector significa que el estilo se aplica solo a los párrafos que siguen directamente a otro párrafo.
Un selector p simple aplicaría el estilo a cada párrafo de la página.

Ver selectores adyacentes en W3.org.


Esto solo funcionará en IE7 o superior. En IE6, el estilo no se aplicará a ningún elemento. Esto también va 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.

Desde el blog de Splash of Style.

Para definir un selector adyacente CSS, se usa 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 cualquier elemento p que sea un elemento secundario directo (primera generación) de un elemento h1 .

  • h1>p coincide con

    (

    dentro de

    )

h1+p seleccionará el primer elemento p que sea un hermano (en el mismo nivel del dom) que un elemento h1 .

  • h1+p coincide con

    (

    lado de / después de

    )

El signo + significa seleccionar un adjacent sibling

Ejemplo:

CSS

 p + p { font-weight: bold; } 

HTML

El estilo se aplicará desde el segundo

 


Ejemplo

Mira este Fiddle y lo entenderás para siempre: http://jsfiddle.net/7c05m7tv/ (Another Fiddle: http://jsfiddle.net/7c05m7tv/70/ )


Soporte del navegador

Los selectores de hermanos adyacentes son compatibles con Internet Explorer 5.x Macintosh. También se admiten en la versión de previsualización 1 de Netscape 6 para todas las plataformas para las que está disponible, y en la versión preliminar 3 de Opera 4 para Windows. Hay errores en el manejo de selectores de hermanos adyacentes en IE5 para Windows y Opera 3 para Windows.

Es bueno saber: Internet Explorer 7 no actualiza el estilo correctamente cuando un elemento se coloca dinámicamente antes que un elemento que coincide con el selector. En Internet Explorer 8, si un elemento se inserta dinámicamente haciendo clic en un enlace, el estilo de primer hijo no se aplica hasta que el enlace pierda el foco.


Aprende más

“+” es el selector de hermanos adyacente. Seleccionará cualquier p DIRECTAMENTE DESPUÉS de ap (no un niño o padre, sin embargo, un hermano).

+ selector se llama Adjacent Sibling Selector .

Por ejemplo, el selector p + p , selecciona los elementos p inmediatamente después de los elementos p

Se puede considerar como un selector looking outside que busca el elemento inmediatamente siguiente.

Aquí hay un fragmento de muestra para aclarar las cosas:

 body { font-family: Tahoma; font-size: 12px; } p + p { margin-left: 10px; } 
 

Header paragraph

This is a paragraph

This is another paragraph

This is yet another paragraph


Footer paragraph

Coincidiría con cualquier elemento p que esté inmediatamente adyacente a un elemento ‘p’. Ver: http://www.w3.org/TR/CSS2/selector.html

Selecciona el siguiente párrafo y sangra el comienzo del párrafo desde la izquierda tal como lo haría en Microsoft Word.

+ presenta uno de los selectores relativos. Lista de todos los selectores relativos:

div p – Se seleccionan todos los elementos

dentro de los elementos

.

div > p – Se seleccionan todos los elementos

cuyo padre directo es

. También funciona hacia atrás ( p < div )

div + p - Todos los elementos de elementos

inmediatamente después de seleccionar el elemento

.

div ~ p : se seleccionan todos los elementos

que están precedidos por un elemento

.

Más sobre los selectores marque aquí .

El más (+) seleccionará el primer elemento inmediato. Cuando use + selector, debe dar dos parámetros. Esto quedará más claro con el ejemplo: aquí div y span son parámetros, por lo que en este caso solo el primer lapso después del estilo de div se diseñará.

  div+ span{ color: green; padding :100px; } 
The top or first element
this is span immediately after div, this will be selected This will not be selected

El estilo anterior solo se aplicará al primer tramo después del div. Es importante tener en cuenta que no se seleccionará el segundo tramo.

 p+p{ //styling the code } p+p{ } simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body. 

This is first paragraph

This is second paragraph

This is third paragraph

Styling part It will style all sibling paragraph with red color.

resultado final se ve así

enter image description here

Significa que coincide con cada elemento p que es inmediatamente adyacente

http://www.snoopcode.com/css/examples/css-adjacent-sibling-selector