path: root/files/es/learn/css/building_blocks/selectors/index.html

---
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>&lt;h1&gt;</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>&lt;p&gt;</code>, en el ejemplo siguiente), y actúa como si un elemento <code>&lt;span&gt;</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>&lt;article&gt;</code> utilizando el operador de combinación hijo (<code>&gt;</code>):</p>

<pre class="brush: css notranslate">article &gt; 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 &gt; 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>