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


Por ejemplo:

p + p {
  /* Some declarations */
}

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


633
2017-07-16 19:26


origen


Respuestas:


Este 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.

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.

Ver también la descripción de Microsoft para Compatibilidad con CSS en Internet Explorer.


654
2017-07-16 19:29



Es el selector de hermanos adyacentes.

De Blog de Splash of Style.

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

h1+p {color:blue;}

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

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

  • h1>p partidos <h1>  <p></p>  </h1> (<p> dentro <h1>)

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

  • h1+p partidos <h1></h1>  <p><p/> (<p> al lado / después <h1>)

172
2017-07-16 19:29



los + signo significa seleccionar un adjacent sibling

Ejemplo:

CSS

p + p
{
   font-weight: bold;
} 

HTML

El estilo se aplicará desde el segundo <p>

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

Ejemplo

Mira este violín y lo entenderás para siempre: http://jsfiddle.net/7c05m7tv/ (Otro violín: 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.

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


47
2017-09-02 11:02



"+" es el selector de hermanos adyacente. Seleccionará cualquier p DIRECTAMENTE DESPUÉS de una p (no un hijo o padre, sino un hermano).


39
2017-07-16 19:29



+ selector se llama Adjacent Sibling Selector.

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

Se puede pensar como una looking outside selector que comprueba 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>

Como somos el mismo tema, vale la pena mencionar otro selector, ~ selector, que es General Sibling Selector

Por ejemplo, p ~ p selecciona todo el p que sigue el p no importa dónde esté, pero ambos p debería tener el mismo padre

Así es como 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>

Tenga en cuenta que el último p también se compara en esta muestra.


21
2017-10-10 12:33



Coincidiría con cualquier elemento p eso es inmediatamente adyacente a un elemento 'p'. Ver: http://www.w3.org/TR/CSS2/selector.html


10
2017-07-16 19:29



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


2
2017-07-16 19:35



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

 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 del div. Es importante tener en cuenta que no se seleccionará el segundo tramo.


1
2017-08-03 19:40



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.

resultado final se ve así

enter image description here 


0
2018-01-19 12:51