diff options
Diffstat (limited to 'files/es/learn/css/building_blocks/selectores_css/index.html')
| -rw-r--r-- | files/es/learn/css/building_blocks/selectores_css/index.html | 223 |
1 files changed, 0 insertions, 223 deletions
diff --git a/files/es/learn/css/building_blocks/selectores_css/index.html b/files/es/learn/css/building_blocks/selectores_css/index.html deleted file mode 100644 index d0ea61da20..0000000000 --- a/files/es/learn/css/building_blocks/selectores_css/index.html +++ /dev/null @@ -1,223 +0,0 @@ ---- -title: Selectores CSS -slug: Learn/CSS/Building_blocks/Selectores_CSS -translation_of: Learn/CSS/Building_blocks/Selectors ---- -<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> - -<p class="summary">En {{Glossary( "CSS")}} los selectores se utilizan para delimitar los elementos {{glossary("HTML")}} de nuestra página web a los que queremos aplicar estilo. Hay una amplia variedad de selectores CSS, lo que permite una gran precisión a la hora de seleccionar elementos a los que aplicar estilo. En este artículo y sus subartículos veremos con detalle todos los tipos y el modo como funcionan.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerrequisitos:</th> - <td>Nociones básicas de informática, tener el <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Instalacion_de_software_basico">software básico instalado</a>, conocimientos básicos de <a href="https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Manejando_los_archivos">trabajar con archivos</a>, conocimientos básicos de HTML (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y una idea de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con CSS</a>).</td> - </tr> - <tr> - <th scope="row">Objetivo:</th> - <td>Aprender con detalle cómo funcionan los selectores CSS.</td> - </tr> - </tbody> -</table> - -<h2 id="¿Qué_es_un_selector">¿Qué es un selector?</h2> - -<p>En un artículo anterior explicamos qué son los selectores. Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que indican al navegador qué elementos HTML se seleccionan para aplicarles una regla que incluye los valores de las propiedades CSS. El elemento o los elementos seleccionados por el selector se denominan <em>sujeto del selector</em>.</p> - -<p><img alt="Fragmento de código con el elemento h1 resaltado." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> - -<p>En artículos anteriores ya has visto algunos selectores y has aprendido que hay diversas maneras de organizar el documento. Por ejemplo, seleccionando un elemento, como <code>h1</code>, o seleccionando una clase, como <code>.special</code>.</p> - -<p>En CSS, los selectores se definen en la especificación de selectores de CSS correspondiente; al igual que cualquier otro elemento de CSS, es necesario que los navegadores los admitan para que funcionen. La mayoría de los selectores que encontrarás se definen en <a href="https://www.w3.org/TR/selectors-3/">especificación de nivel 3 de selectores</a>, que es una especificación consolidada y, por lo tanto, la mayoría de navegadores admitirán esos selectores.</p> - -<h2 id="Listas_de_selectores">Listas de selectores</h2> - -<p>Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en una <em>lista de selectores</em> para que la regla se aplique a cada uno de los selectores individuales. Por ejemplo, si tengo el mismo CSS para un <code>h1</code> y para una clase <code>.special</code>, los puedo escribir como dos reglas separadas.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -.special { - color: blue; -} </code></pre> - -<p>También los podrías combinar en una lista de selectores, separándolos con una coma.</p> - -<pre class="brush: css notranslate"><code>h1, .special { - color: blue; -} </code></pre> - -<p>Es posible dejar un espacio en blanco tanto antes como después de la coma. Incluso puede resultar más legible si cada selector se encuentra en una línea distinta.</p> - -<pre class="brush: css notranslate"><code>h1, -.special { - color: blue; -} </code></pre> - -<p>En el ejemplo siguiente, intenta combinar los dos selectores de modo que tengan la misma declaración. El aspecto visual debe permanecer igual tras la combinación.</p> - -<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> - -<p>Cuando agrupas los selectores de esta manera, si alguno de los selectores no es válido, el navegador sencillamente ignora toda la regla.</p> - -<p>En el ejemplo siguiente, la regla que corresponde al selector de clase que no es válido se ignora, mientras que el estilo se aplica al elemento <code>h1</code>.</p> - -<pre class="brush: css notranslate"><code>h1 { - color: blue; -} - -..special { - color: blue; -} </code></pre> - -<p>Sin embargo, si se combinan, toda la regla se considera no válida y no se aplicará estilo ni a <code>h1</code> ni a la clase.</p> - -<pre class="brush: css notranslate"><code>h1, ..special { - color: blue; -} </code></pre> - -<h2 id="Tipos_de_selectores">Tipos de selectores</h2> - -<p>Hay diferentes agrupaciones de selectores, y conocer qué tipo de selector necesitas te ayudará a encontrar la herramienta adecuada para tu trabajo. En estos subartículos vamos a ver los diferentes grupos de selectores con más detalle.</p> - -<h3 id="Selectores_de_tipo_de_clase_y_de_ID">Selectores de tipo, de clase y de ID</h3> - -<p>Este grupo incluye selectores que delimitan un elemento HTML, como por ejemplo un <code><h1></code>.</p> - -<pre class="brush: css notranslate">h1 { }</pre> - -<p>También incluye selectores que delimitan una clase:</p> - -<pre class="brush: css notranslate">.box { }</pre> - -<p>o un ID:</p> - -<pre class="brush: css notranslate">#unique { }</pre> - -<h3 id="Selectores_de_atributo">Selectores de atributo</h3> - -<p>Este grupo de selectores te proporciona diferentes formas de seleccionar elementos según la presencia de un atributo determinado en un elemento:</p> - -<pre class="brush: css notranslate">a[title] { }</pre> - -<p>O incluso hacer una selección basada en la presencia de un atributo que tiene un valor particular asignado:</p> - -<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre> - -<h3 id="Las_pseudoclases_y_los_pseudoelementos">Las pseudoclases y los pseudoelementos</h3> - -<p>Este grupo de selectores incluye pseudoclases, que aplican estilo a ciertos estados de un elemento. La pseudoclase <code>:hover</code>, por ejemplo, selecciona un elemento solo cuando se le pasa el ratón por encima.</p> - -<pre class="brush: css notranslate">a: hover {}</pre> - -<p>También incluye pseudoelementos, que seleccionan una parte determinada de un elemento en vez del elemento en sí. Por ejemplo, <code>::first-line</code> siempre selecciona la primera línea del texto que se encuentra dentro de un elemento (<code><p></code>, en el ejemplo siguiente), y actúa como si un elemento <code><span></code> hubiera delimitado la primera línea, seleccionado y aplicado estilo.</p> - -<pre class="brush: css notranslate">p::first-line { }</pre> - -<h3 id="Combinadores">Combinadores</h3> - -<p>El último grupo de selectores combina otros selectores con el fin de delimitar elementos de nuestros documentos. El ejemplo siguiente selecciona los párrafos que son hijos directos del elemento <code><article></code> utilizando el operador de combinación hijo (<code>></code>):</p> - -<pre class="brush: css notranslate">article > p { }</pre> - -<h2 id="Próximos_pasos">Próximos pasos</h2> - -<p>Echa un vistazo a esta tabla de referencia de selectores que contiene enlaces directos a los distintos tipos de selectores que se explican en nuestra sección de aprendizaje o en MDN, o bien sigue adelante e inicia tu viaje para averiguar cómo funcionan en <a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID">Selectores de tipo, de clase y de ID</a>.</p> - -<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> - -<h2 id="Tabla_de_referencia_de_selectores">Tabla de referencia de selectores</h2> - -<p>La tabla que te mostramos a continuación proporciona una descripción general de los selectores que puedes utilizar junto con enlaces a diversas páginas de esta guía que te mostrarán cómo utilizar cada tipo de selector. También hemos incluido un enlace a la página MDN de cada selector para poder comprobar la información sobre los navegadores que lo admiten. Puedes utilizarlo como referencia para volver cuando necesites buscar los selectores a medida que avanzas con la materia o mientras experimentas con CSS por tu cuenta.</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Selector</th> - <th scope="col">Ejemplo</th> - <th scope="col">Tutorial de aprendizaje de CSS</th> - </tr> - </thead> - <tbody> - <tr> - <td><a href="/es/docs/Web/CSS/Type_selectors">Selector de tipo</a></td> - <td><code>h1 { }</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Tipos_de_selectores">Los tipos de selectores</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Universal_selectors">Selector universal</a></td> - <td><code>* { }</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#El_selector_universal">El selector universal</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Class_selectors">Selector de clase</a></td> - <td><code>.box { }</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Selectores_de_clase">Los selectores de clase</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/ID_selectors">Selector de ID</a></td> - <td><code>#unique { }</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_tipo_clase_e_ID#Selectores_de_ID">Los selectores de ID</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Selectores_atributo">Selector de atributo</a></td> - <td><code>a[title] { }</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Selectores_de_atributos">Los selectores de atributo</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Pseudo-classes">Pseudoclase</a></td> - <td><code>p:first-child { }</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#%C2%BFQu%C3%A9_es_una_pseudoclase">Las pseudoclases</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Pseudoelementos">Pseudoelemento</a></td> - <td><code>p::first-line { }</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos#%C2%BFQu%C3%A9_es_un_pseudoelemento">Los pseudoelementos</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Descendant_combinator">Operadores de combinación descendentes</a></td> - <td><code>article p</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Selector_de_descendientes">Operadores de combinación descendentes</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Child_combinator">Operador de combinación de elementos hijo</a></td> - <td><code>article > p</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Selector_de_combinaci%C3%B3n_de_elementos_hijo">Operadores de combinación de elementos hijo</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Selectores_hermanos_adyacentes">Operador de combinación de elementos hermanos adyacentes</a></td> - <td><code>h1 + p</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Hermanos_adyacentes">Hermanos adyacentes</a></td> - </tr> - <tr> - <td><a href="/es/docs/Web/CSS/Selectores_hermanos_generales">Operador de combinación general de elementos hermanos</a></td> - <td><code>h1 ~ p</code></td> - <td><a href="/es/docs/Learn/CSS/Building_blocks/Selectores_CSS/Combinadores#Hermanos_generales">Hermanos generales</a></td> - </tr> - </tbody> -</table> - -<h2 id="En_este_módulo">En este módulo</h2> - -<ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada y la herencia</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectores CSS</a> - <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectores de tipo, de clase y de ID</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectores de atributo</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Las pseudoclases y los pseudoelementos</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Operadores de combinación</a></li> - </ul> - </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El modelo de caja</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fondos y bordes</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El uso de diferentes direcciones de texto</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordamiento de los contenidos</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Los valores y las unidades</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Elementos de dimensionado en CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imágenes, media y elementos de formulario</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estilo a las tablas</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizar el CSS</a></li> -</ol> |