aboutsummaryrefslogtreecommitdiff
path: root/files/es/web/css/adjacent_sibling_combinator
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:46:50 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:46:50 +0100
commita55b575e8089ee6cab7c5c262a7e6db55d0e34d6 (patch)
tree5032e6779a402a863654c9d65965073f09ea4182 /files/es/web/css/adjacent_sibling_combinator
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.gz
translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.tar.bz2
translated-content-a55b575e8089ee6cab7c5c262a7e6db55d0e34d6.zip
unslug es: move
Diffstat (limited to 'files/es/web/css/adjacent_sibling_combinator')
-rw-r--r--files/es/web/css/adjacent_sibling_combinator/index.html135
1 files changed, 135 insertions, 0 deletions
diff --git a/files/es/web/css/adjacent_sibling_combinator/index.html b/files/es/web/css/adjacent_sibling_combinator/index.html
new file mode 100644
index 0000000000..1200c4bd61
--- /dev/null
+++ b/files/es/web/css/adjacent_sibling_combinator/index.html
@@ -0,0 +1,135 @@
+---
+title: Selectores de hermanos adyacentes
+slug: Web/CSS/Selectores_hermanos_adyacentes
+tags:
+ - CSS
+ - NeedsMobileBrowserCompatibility
+ - Referencia CSS
+ - Selectores
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+<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>