selectors - ¿Qué significa el selector CSS "+"(signo más)?

selector padre css

Question

Por ejemplo:

p + p {
  /* Some declarations */
}

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

Answer 1

"+" es el selector de hermanos adyacente. Seleccionará cualquier p DIRECTAMENTE DESPUÉS de una ap (aunque no sea un niño o un padre, un hermano).

Answer 2

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

Answer 3

El Plus (+) seleccionará el primer elemento inmediato. Cuando usas + selector tienes que 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 tramo después de la div será un estilo.

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

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

Answer 4

El signo + significa seleccionar un adjacent sibling

Ejemplo:

CSS

p + p
{
   font-weight: bold;
} 

HTML

El estilo se aplicará a partir del segundo <p>

<div>
   <p></p>
   <p></p>
</div>

Ejemplo

Vea este Fiddle y lo entenderá por siempre: http://jsfiddle.net/7c05m7tv/ (Otro 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 1 de la versión preliminar de Netscape 6 para todas las miles de plataformas para las que está disponible, y en la versión 3 de la versión preliminar 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 saberlo: Internet Explorer 7 no actualiza el estilo correctamente cuando un elemento se coloca dinámicamente antes de un elemento que coincide con el selector. En Internet Explorer 8, si un elemento se inserta dinámicamente al hacer clic en un enlace, el estilo del primer hijo no se aplica hasta que el enlace pierda el foco.

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

Answer 5

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 dará formato al primer párrafo después de (no dentro) cualquier encabezado h1 en azul.

h1>p selecciona cualquier elemento p que sea un hijo directo (primera generación) (interior) de un elemento h1 .

• h1>p coincide con <h1> <p></p> </h1> ( <p> dentro de <h1> )

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

• h1+p coincide con <h1></h1> <p><p/> ( <p> junto a / después de <h1> )

Answer 6

Este selector significa que el estilo se aplica solo a los párrafos que siguen directamente a otro párrafo.
Un selector de p plano 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 con CSS en Internet Explorer .

Answer 7

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

Answer 8

Significa que coincide con cada elemento p que es inmediatamente adyacente.

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

Answer 9

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

div p - Se seleccionan todos los elementos <p> dentro de los elementos <div> .

div > p - Se seleccionan todos los elementos <p> cuyo padre directo es <div> . Funciona al revés también ( p < div )

div + p - Todos los elementos de <p> elementos inmediatamente después de que se seleccione el elemento <div> .

div ~ p - Se seleccionan todos los elementos <p> que están precedidos por un elemento <div> .

Más sobre los selectores ver here .

Answer 10

+ selector se llama Adjacent Sibling Selector .

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

Puede considerarse 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;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Ya que somos uno del mismo tema, vale la pena mencionar otro selector, ~ selector, que es General Sibling Selector

Por ejemplo, p ~ p selecciona toda la p que sigue a la p no importa dónde esté, pero ambas p deberían tener el mismo padre.

Aquí es cómo se ve con el mismo marcado:

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

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Observe que la última p también coincide en esta muestra.

Answer 11

p+p{
//styling the code
}

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

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

La salida final se ve así