Cuándo usar el signo CSS +

Question

Pregunta muy fácil. He estado usando CSS por un tiempo pero rara vez uso + suspiro para mi código. ¿Alguien podría explicar cuál es el mejor momento para usarlo? No he podido encontrar ningún producto de Google ... Gracias a millones ...

Answer 1

He encontrado que selectores de hermanos adyacentes son útiles cuando desea aplicar speci al estilo del primer elemento de una serie de elementos. Por ejemplo, si desea que el estilo del primer párrafo de un artículo diferente al resto, se puede utilizar:

p { 
    /* styles for the first paragraph */ 
} 

p + p { 
    /* styles for all other paragraphs */ 
} 

Esto puede reemplazar el uso de class="first" en muchas situaciones.

EDIT: El uso de la pseudoclase first-child funcionaría mejor para este caso específico, ya que es compatible con una gama más amplia de navegadores. (Gracias alex)

Es posible que también desee ajustar la forma en que ciertos elementos se colocan uno al lado del otro.Si usted tiene una lista desordenada que se ve bien en sí mismo, pero necesita menos relleno en la parte superior cuando se está al lado de un párrafo, se puede utilizar:

ul { 
    padding-top: 1em; 
    /* Default ul styling */ 
} 

p + ul { 
    padding-top: 0; 
    /* special styling for lists that come after paragraphs */ 
} 

Answer 2

Es la Adjacent Sibling Selector

selectores de hermanos adyacentes tienen la siguiente sintaxis: E1 + E2, donde E2 es el tema del selector. El selector coincide si E1 y E2 comparten el mismo elemento primario en el árbol de documentos y E1 precede inmediatamente a E2, ignorando nodos sin elementos (como nodos de texto y comentarios).

En términos menos genéricos, le permite seleccionar un elemento como normal, pero también califica que tiene un elemento particular antes que en el mismo nivel.

Por ejemplo, con este código HTML:

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

Normalmente se podría seleccionar el span con sólo pidiendo span, pero si sólo se desea afectar la span con una forma determinada cuando hay un p justo antes de que puede usar p + span. Tenga en cuenta que no puede usar div + span aquí porque div está en un "nivel" diferente.

Answer 3

También se agregó en CSS2 el directo combinador adyacente. Por ejemplo, imagine que desea aplicar sangría a todos los párrafos en un documento, excepto inmediatamente después de un subtítulo (<h2>). La segunda regla muestra un selector h2 combina con selector de PA mediante un signo más como el combinador para indicar que la declaración se aplica sólo si p sigue inmediatamente h2:

p { text-indent: 0.5in; } 
h2 + p { text-indent: 0; } 

De - http://www.xml.com/pub/a/2003/06/18/css3-selectors.html

Answer 4

utilizarlo siempre que desea orientar la siguiente selector de juego de un cierto selector. P.ej.

<p>Item 1</p> 
<div>Item 2</div> 
<div>Item 3</div> 
<p>Item 4</p> 

Usando p + div permitirá que el estilo de artículo 2, ya que está justo después de una etiqueta p. Example in action.

El uso de p + p no dará ningún estilo, ya que la siguiente etiqueta p no está junto a la primera. Example in action.

Usando div + p permitirá que el estilo de artículo 4, ya que está justo después de un div. Example in action.

Y así sucesivamente ...