files/es/web/css/adjacent_sibling_combinator/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

---
title: Selectores de hermanos adyacentes
slug: Web/CSS/Adjacent_sibling_combinator
tags:
  - CSS
  - NeedsMobileBrowserCompatibility
  - Referencia CSS
  - Selectores
translation_of: Web/CSS/Adjacent_sibling_combinator
original_slug: Web/CSS/Selectores_hermanos_adyacentes
---
<p>{{CSSRef("Selectors")}}</p>

<p>Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.</p>

<h2 id="Sintaxis">Sintaxis</h2>

<pre class="syntaxbox">elemento_anterior + elemento_afectado { <em>estilos</em> }
</pre>

<h2 id="Ejemplo">Ejemplo</h2>

<div id="Example_1">
<pre class="brush: css">li:first-of-type + li {
  color: red;
}
</pre>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Uno&lt;/li&gt;
  &lt;li&gt;Dos&lt;/li&gt;
  &lt;li&gt;Tres&lt;/li&gt;
&lt;/ul&gt;</pre>
</div>

<p>{{EmbedLiveSample('Example_1', 200, 100)}}</p>

<p>Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos {{HTMLElement("img")}} :</p>

<pre class="brush: css">img + span.caption {
  font-style: italic;
}
</pre>

<p>que coincidiría con los siguientes elementos {{HTMLElement("span")}} :</p>

<pre class="brush: html">&lt;img src="photo1.jpg"&gt;&lt;span class="caption"&gt;The first photo&lt;/span&gt;
&lt;img src="photo2.jpg"&gt;&lt;span class="caption"&gt;The second photo&lt;/span&gt;
</pre>

<h2 id="Especificaciones">Especificaciones</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificacion</th>
   <th scope="col">Estado</th>
   <th scope="col">Comentarios</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidad_entre_navegadores">Compatibilidad entre navegadores</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>7.0<sup>[1]</sup></td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>2.1</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del <code>first-child</code> no se aplica hasta que el enlace pierde el foco.</p>

<h2 id="Ver_también">Ver también</h2>

<ul>
 <li><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Selectores de hermanos generales</a></li>
</ul>