unslug es: move

2 files changed, 231 insertions, 0 deletions

diff --git a/files/es/web/css/css_selectors/index.html b/files/es/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..20baaf25a6
--- /dev/null
+++ b/files/es/web/css/css_selectors/index.html
@@ -0,0 +1,164 @@
+---
+title: Selectores CSS
+slug: Web/CSS/Selectores_CSS
+tags:
+  - CSS
+  - Referencia
+  - Selectores
+  - Selectores de CSS
+  - Visión general
+translation_of: Web/CSS/CSS_Selectors
+---
+<div>{{CSSRef}}</div>
+
+<p>Los <strong>selectores </strong>definen sobre qué elementos se aplicará un conjunto de reglas CSS.</p>
+
+<h2 id="Selectores_básicos">Selectores básicos</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Selector de tipo</a></dt>
+ <dd>Selecciona todos los elementos que coinciden con el nombre del elemento especificado.<br>
+ <strong>Sintaxis:</strong> <code><var>eltname</var></code><br>
+ <strong>Ejemplo:</strong> <code>input</code> se aplicará a cualquier elemento {{HTMLElement('input')}}.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Selector de clase</a></dt>
+ <dd>Selecciona todos los elementos que tienen el atributo de <code>class</code> especificado.<br>
+ <strong>Sintaxis:</strong> <code>.<var>classname</var></code><br>
+ <strong>Ejemplo:</strong> <code>.index</code> seleccionará cualquier elemento que tenga la clase "<em>index</em>".</dd>
+ <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Selector de ID</a></dt>
+ <dd>Selecciona un elemento basándose en el valor de su atributo <code>id</code>. Solo puede haber un elemento con un determinado ID dentro de un documento.<br>
+ <strong>Sintaxis:</strong> <code>#<var>idname</var></code><br>
+ <strong>Ejemplo:</strong> <code>#toc</code> se aplicará a cualquier elemento que tenga el ID "<em>toc</em>".</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Selector universal</a></dt>
+ <dd>Selecciona todos los elementos. Opcionalmente, puede estar restringido a un espacio de nombre específico o a todos los espacios de nombres.<br>
+ <strong>Sintaxis:</strong> <code>* ns|* *|*</code><br>
+ <strong>Ejemplo:</strong> <code>*</code> se aplicará a todos los elementos del documento.</dd>
+ <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selector de atributo</a></dt>
+ <dd>Selecciona elementos basándose en el valor de un determinado atributo.<br>
+ <strong>Sintaxis:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
+ <strong>Ejemplo:</strong> <code>[autoplay]</code> seleccionará todos los elementos que tengan el atributo "autoplay" establecido (a cualquier valor).</dd>
+</dl>
+
+<h2 id="Combinadores">Combinadores</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Combinador de hermanos adyacentes</a></dt>
+ <dd>El combinador <code>+</code> selecciona hermanos adyacentes. Esto quiere decir que el segundo elemento sigue directamente al primero y ambos comparten el mismo elemento padre.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> + <var>B</var></code><br>
+ <strong>Ejemplo:</strong> La regla <code>h2 + p</code> se aplicará a todos los elementos {{HTMLElement('p')}} que siguen directamente a un elemento {{HTMLElement('h2')}}.</dd>
+ <dt><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Combinador general de hermanos</a></dt>
+ <dd>El combinador <code>~</code> selecciona hermanos. Esto quiere decir que el segundo elemento sigue al primero (no necesariamente de forma inmediata) y ambos comparten el mismo elemento padre.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> ~ <var>B</var></code><br>
+ <strong>Ejemplo:</strong> La regla <code>p ~ span</code> se aplicará a todos los elementos {{HTMLElement('span')}} que siguen un elemento {{HTMLElement('p')}}.</dd>
+ <dt><a href="/es/docs/Web/CSS/Child_selectors">Combinador de hijo </a></dt>
+ <dd>El combinador <code>&gt;</code> selecciona los elementos que son hijos directos del primer elemento.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Ejemplo:</strong> La regla <code>ul &gt; li</code> se aplicará a todos los elementos {{HTMLElement('li')}} que son hijos directos de un elemento {{HTMLElement('ul')}}.</dd>
+ <dt><a href="/es/docs/Web/CSS/Descendant_selectors">Combinador de descendientes</a></dt>
+ <dd>El combinador <code> </code> (espacio) selecciona los elementos que son descendientes del primer elemento.<br>
+ <strong>Sintaxis:</strong> <code>A B</code><br>
+ <strong>Ejemplo:</strong> La regla <code>div span</code> se aplicará a todos los elementos {{HTMLElement('span')}} que están dentro de un elemento {{HTMLElement('div')}}.</dd>
+ <dt><a href="https://developer.mozilla.org/es/docs/Web/CSS/Column_combinator">Combinador de column</a>a {{Experimental_Inline}}</dt>
+ <dd>El combinador <code>||</code> selecciona los elementos especificados pertenecientes a una columna.<br>
+ <strong>Sintaxis:</strong> <code><var>A</var> || <var>B</var></code><br>
+ <strong>Ejemplo:</strong> <code>col || td</code> seleccionará todos los elementos {{HTMLElement("td")}} que pertenezcan al ámbito de {{HTMLElement("col")}}.</dd>
+</dl>
+
+<h2 id="Pseudoclases"><strong>Pseudoclases</strong></h2>
+
+<dl>
+ <dt>Las <a href="/es/docs/Web/CSS/Pseudo-classes">pseudoclases</a> permiten la selección de elementos, basada en información de estado que no está contenida en el árbol de documentos.</dt>
+ <dd><strong>Ejemplo:</strong> La regla a<code>:visited</code> se aplicará a todos los elementos {{HTMLElement("a")}} que hayan sido visitados por el usuario.</dd>
+</dl>
+
+<h2 id="Pseudoelementos">Pseudoelementos</h2>
+
+<dl>
+ <dt>
+ <p>Los <a href="/es/docs/Web/CSS/Pseudoelementos">pseudoelementos</a> son abstracciones del árbol que representan entidades más allá de los elementos HTML. Por ejemplo, HTML no tiene un elemento que describa la primera letra de un párrafo ni los marcadores de una lista. Los pseudoelementos representan estas entidades y nos permiten asignarles reglas CSS. De este modo podemos diseñar estas entidades de forma independiente.</p>
+ </dt>
+ <dd><strong>Ejemplo:</strong> La regla <code>p::first-line</code> se aplicará a la primera línea de texto de todos los elementos {{HTMLElement('p')}}.</dd>
+</dl>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Añadidos el combinador de columna <code>||</code>, selectores de estructura de grilla, combinadores lógicos, pseudoclases de ubicación, dimensión temporal, estado de recurso, lingüisticas y de UI, modificador para la selección de valores de atributo ASCII que distingue entre mayúsculas y minúsculas.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Añadidos el combinador <code>~</code> general de hermanos y las pseudoclases de árbol-estructural. Los pseudoelementos creados, usan un prefijo <code>::</code> de dos puntos dobles. Selectores de atributos adicionales.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>Añadidos los combinadores <code>&gt;</code> de elemento hijo y <code>+</code> de elementos hermanos adyacentes. Añadidos los selectores <strong>universal</strong> y de <strong>atributo</strong>.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>Definición inicial.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_en_navegadores">Compatibilidad en 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>1</td>
+   <td>{{CompatGeckoDesktop("1")}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.0</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>1.5</td>
+   <td>{{CompatGeckoMobile("1.9.2")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
diff --git a/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..fe51517a2b
--- /dev/null
+++ b/files/es/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,67 @@
+---
+title: 'Usando la pseudo-clase :target en selectores'
+slug: 'Web/CSS/Selectores_CSS/Usando_la_pseudo-clase_:target_en_selectores'
+tags:
+  - CSS
+  - CSS3
+  - Selectores
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<p><span class="comment">When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.</span> {{CSSRef}}</p>
+
+<p>Como ayuda para identificar el destino de un enlace que apunta a una parte específica de un documento, los <a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectores CSS3</a> incluyen la <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-clase</a> {{ Cssxref(":target") }}.</p>
+
+<h3 id="Picking_a_Target" name="Picking_a_Target">Seleccionando un objetivo (target)</h3>
+
+<p>La pseudo-clase <code>{{ Cssxref(":target") }}</code> es usada para estilizar el elemento objetivo de una URI que contiene un identificador de fragmento. Por ejemplo, la URI <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example</span></code> contiene el identificador de fragmento <code>#Example</code>. En HTML, los identificadores son valores de los atributos <code>id</code> o <code>name</code>, pues ambos comparten el mismo espacio de nombres. Por lo tanto, la URI de ejemplo apuntará al encabezado "Example" en este documento.</p>
+
+<p>Supongamos que se quiere estilizar cualquier elemento <code>h2</code> que sea el objetivo de una URI, pero no queremos que cualquier otro elemento tenga esos mismos estilos. Es así de simple:</p>
+
+<pre class="notranslate">h2:target {font-weight: bold;}</pre>
+
+<p>También es posible crear estilos específicos para fragmentos particulares del documento. Esto se hace usando el mismo valor del identificador que se encuentra en la URI. Así, para añadir un borde al fragmento <code>#Example</code>, escribiremos:</p>
+
+<pre class="notranslate">#Example:target {border: 1px solid black;}</pre>
+
+<h3 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Aplicando estilos a todos los elementos objetivo</h3>
+
+<p>Si lo que se intenta es crear un estilo que cubra a todos los elementos objetivo, se puede usar el selector universal:</p>
+
+<pre class="notranslate">:target {color: red;}
+</pre>
+
+<h3 id="Example" name="Example">Ejemplo</h3>
+
+<p>En el siguiente ejemplo, hay cinco enlaces que apuntan a elementos en el mismo documento. Seleccionar el enlace "First", por ejemplo, causará que <code>&lt;h1 id="one"&gt;</code> sea el elemento objetivo. Nótese que el documento puede desplazarse a una nueva posición, pues los elementos objetivo están ubicados en la parte superior de la ventana del navegador cuando es posible.</p>
+
+<div id="example">
+<pre class="notranslate">&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h3 id="Conclusion" name="Conclusion">Conclusión</h3>
+
+<p>En los casos en los que un identificador de fragmento apunte a una porción del documento, los lectores pueden confundirse sobre qué parte del documento se supone que están leyendo. Darle un estilo particular al objetivo de la URI le resta confusión al lector, o incluso la elimina.</p>
+
+<h3 id="Related_Links" name="Related_Links">Enlaces relacionados</h3>
+
+<ul>
+ <li><a class="external" href="http://www.w3.org/TR/css3-selectors/#target-pseudo">Selectores CSS3 #target-pseudo</a></li>
+ <li><a class="internal" href="/es/CSS/:target" title="En/CSS/:target">Referencia CSS :target</a></li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Información del Documento Original</h3>
+
+<ul>
+ <li>Autor(es): Eric Meyer, Evangelista de Estándares, Netscape Communications</li>
+ <li>Información Original de Copyright: Copyright © 2001-2003 Netscape. Todos los derechos reservados.</li>
+ <li>Nota: El artículo en inglés era originalmente parte del sitio DevEdge.</li>
+</ul>
+</div>