path: root/files/es/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html

---
title: Pseudoclases y pseudoelementos
slug: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
original_slug: Learn/CSS/Building_blocks/Selectores_CSS/Pseudo-clases_y_pseudo-elementos
---
<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

<p>El conjunto de selectores que estudiaremos en este artículo se conocen como <strong>pseudoclases</strong> y <strong>pseudoelementos</strong>. Hay muchos y a menudo sirven para fines muy específicos. Una vez que sepas cómo usarlos, puedes echar un vistazo a la lista para ver si alguno sirve para la página que quieres crear. Una vez más, la página correspondiente de MDN resulta muy útil para conocer qué navegadores los admiten o no.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conocimientos básicos 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>, HTML básico (véase <a href="/es/docs/Learn/HTML/Introduccion_a_HTML">Introducción a HTML</a>) y nociones de cómo funciona el CSS (véase <a href="/es/docs/Learn/CSS/First_steps">Primeros pasos con el CSS</a>).</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Obtener información sobre los selectores de pseudoclases y pseudoelementos.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Qué_es_una_pseudoclase">¿Qué es una pseudoclase?</h2>

<p>Una pseudoclase es un selector que marca los elementos que están en un estado específico, por ejemplo, los que son el primer elemento de su tipo, o aquellos por los que el cursor les pasa por encima. Tienden a actuar como si hubieras aplicado una clase en una parte determinada del documento y, a menudo, ayudan a reducir el exceso de clases y proporcionan un marcado más flexible y fácil de mantener.</p>

<p>Las pseudoclases son palabras clave que comienzan con dos puntos:</p>

<pre class="notranslate">:<em>pseudo-class-name</em></pre>

<h3 id="Ejemplos_simples_de_pseudoclases">Ejemplos simples de pseudoclases</h3>

<p>Echemos un vistazo a algunos ejemplos. Si queremos el primer párrafo de un artículo en letra más grande y en negrita, podemos añadir una clase a ese párrafo y luego añadirle CSS a esa clase, como se muestra en este ejemplo:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>

<p>Sin embargo, podría ser complicado de mantener. ¿Y si añadiésemos un párrafo nuevo en la parte superior del documento? Habría que mover la clase para que quede antes del nuevo párrafo. En lugar de añadir la clase, podríamos utilizar el selector de pseudoclase {{cssxref(":first-child")}}, que <em>siempre</em> seleccionará el primer elemento hijo del artículo, y de esta forma no tendremos que editar el código HTML (esto no siempre es posible, tal vez debido a que lo genera un CMS).</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>

<p>Todas las pseudoclases se comportan del mismo modo. Seleccionan un fragmento del documento que está en un estado determinado y se comportan como si se hubiera añadido una clase a su HTML. Echa un vistazo a otros ejemplos en MDN:</p>

<ul>
 <li><code><a href="/en-US/docs/Web/CSS/:last-child">:last-child</a></code></li>
 <li><code><a href="/en-US/docs/Web/CSS/:only-child">:only-child</a></code></li>
 <li><code><a href="/en-US/docs/Web/CSS/:invalid">:invalid</a></code></li>
</ul>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Es válido escribir pseudoclases y pseudoelementos sin que les preceda un selector de elemento. En el ejemplo anterior, podría escribirse <code>:first-child</code> y la regla se aplicaríaa cualquier elemento que sea el primer hijo de un elemento <code>&lt;article&gt;</code>, no solo un párrafo primer hijo. <code>:first-child</code> equivale a <code>*:first-child</code>. Pero normalmente se quiere más control y hay que ser más específico.</p>
</div>

<h3 id="Pseudoclases_de_acción_de_usuario">Pseudoclases de acción de usuario</h3>

<p>Algunas pseudoclases solo intervienen cuando el usuario interactúa con el documento de alguna manera. Estas pseudoclases de <strong>acción de usuario</strong>, que también reciben el nombre de <strong>pseudoclases dinámicas</strong>, actúan como si se añadiese una clase al elemento cuando el usuario interactúa con él. Algunos ejemplos son:</p>

<ul>
 <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code>: solo interviene si el usuario pasa el cursor sobre un elemento, normalmente un enlace.</li>
 <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code>: solo interviene si el usuario selecciona el elemento con los controles del teclado.</li>
</ul>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>

<h2 id="¿Qué_es_un_pseudoelemento">¿Qué es un pseudoelemento?</h2>

<p>Los pseudoelementos se comportan de manera similar. Sin embargo, actúan como si hubieras añadido un elemento HTML totalmente nuevo en el marcado, en lugar de haber aplicado una clase nueva a los elementos presentes. Los pseudoelementos empiezan con un doble signo de dos puntos <code>::</code>.</p>

<pre class="notranslate"><em>::pseudo-element-name</em></pre>

<div class="blockIndicator note">
<p><strong>Nota</strong>: Algunos de los primeros pseudoelementos utilizaban la sintaxis de un solo signo de dos puntos, así que puede ser que en ocasiones los veas escritos de esta forma en algún código o ejemplo. Los navegadores modernos leen tanto los pseudoelementos con la sintaxis de los dos puntos simple como la de los dos puntos doble para garantizar la compatibilidad retrospectiva.</p>
</div>

<p>Por ejemplo, si deseas seleccionar la primera línea de un párrafo simplemente puedes delimitarlo con el elemento <code>&lt;span&gt;</code> y utilizar un selector de elementos. Sin embargo, fallará si el número de palabras que has delimitado resulta ser más largo o más corto que el ancho del elemento padre. Ya que normalmente no sabemos cuántas palabras caben en una línea porque esto cambia con el ancho de la pantalla o con los cambios de tamaño de la letra, no es posible hacer esto introduciendo solo HTML.</p>

<p>El pseudoelemento <code>::first-line</code> soluciona este problema: no importa si el número de palabras aumenta o disminuye, siempre se selecciona la primera línea.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>

<p>Actúa como si hubiera un elemento <code>&lt;span&gt;</code> mágicamente delimitando esa primera línea, que se actualiza cada vez que la longitud de la línea cambia.</p>

<p>Puedes observar que en ambos párrafos se selecciona la primera línea.</p>

<h2 id="Combinar_pseudoclases_y_pseudoelementos">Combinar pseudoclases y pseudoelementos</h2>

<p>Si quieres poner en negrita la primera línea del primer párrafo, puedes encadenar los selectores <code>:first-child</code> y <code>::first-line</code>. Añade al ejemplo anterior el CSS siguiente. Queremos que se seleccione la primera línea del primer elemento <code>&lt;p&gt;</code> que esté dentro de un elemento <code>&lt;article&gt;</code>.</p>

<pre class="brush: css notranslate"><code>article p:first-child::first-line {
  font-size: 120%;
  font-weight: bold;
}</code></pre>

<h2 id="Generar_contenido_con_before_y_after">Generar contenido con ::before y ::after</h2>

<p>Hay un par de pseudoelementos especiales que se utilizan junto con la propiedad de <code><a href="/en-US/docs/Web/CSS/content">content</a></code> para introducir contenido en el documento usando el CSS.</p>

<p>Puedes utilizarlos para insertar una cadena de texto, como en el ejemplo siguiente. Intenta cambiar el valor del texto de la propiedad {{cssxref("content")}} y observa el cambio en la salida. También puedes cambiar el pseudoelemento <code>::before</code> por <code>::after</code> y verás que el texto se inserta al final del elemento, en lugar de al principio.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>

<p>Sin embargo, en realidad no es habitual insertar cadenas de texto desde el CSS, porque ese texto resulta inaccesible para algunos lectores de pantalla y puede ser difícil de buscar y modificar en el futuro.</p>

<p>Un uso más adecuado de estos pseudoelementos es insertar un icono. Por ejemplo, la pequeña flecha que añadimos en el ejemplo siguiente es un indicador visual que no queremos que el lector de pantalla muestre:</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>

<p>Estos pseudoelementos también se utilizan con frecuencia para insertar una cadena vacía a la que luego se le puede aplicar estilo, como a cualquier otro elemento de la página.</p>

<p>En el ejemplo siguiente hemos añadido una cadena vacía mediante el pseudoelemento <code>::before</code>. Le hemos asociado <code>display: block</code> para poder aplicarle estilo para que tenga una anchura y una altura determinadas. A continuación, utilizamos el CSS para aplicar estilo de la misma forma que lo haríamos con cualquier otro elemento. Juega con el CSS y cambia la forma en que se ve y se comporta.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>

<p>El uso de los pseudoelementos <code>::before</code> y <code>::after</code>, junto con la propiedad <code>content</code> se conoce como «contenido generado» en CSS, y verás que esta técnica se utiliza a menudo para diversas tareas. Un buen ejemplo es la página web <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, que te ayuda a generar una flecha con CSS. Echa un vistazo al CSS a medida que creas tu flecha y verás cómo funcionan los pseudoelementos {{cssxref("::before")}} y {{cssxref("::after")}}. Cada vez que veas estos selectores, echa un vistazo a la propiedad {{cssxref("content")}} para ver qué se añade al documento.</p>

<h2 id="Sección_de_referencia">Sección de referencia</h2>

<p>Hay un gran número de pseudoclases y pseudoelementos, así que resulta útil tener una lista para ir consultándolos. A continuación encontrarás un par de tablas con enlaces a sus páginas de referencia en MDN. Tómalas como referencia para ver de qué dispones para seleccionar qué tipos de elementos.</p>

<h3 id="Las_pseudoclases">Las pseudoclases</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Selector</th>
   <th scope="col">Descripción</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ Cssxref(":active") }}</td>
   <td>Selecciona un elemento cuando el usuario lo activa (por ejemplo, con un clic).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":any-link") }}</td>
   <td>Selecciona los estados <code>:link</code> y <code>:visited</code> de un enlace.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":blank") }}</td>
   <td>Selecciona un <a href="/es/docs/Web/HTML/Elemento/input">elemento <code>&lt;input&gt;</code></a> cuyo valor de entrada está vacío.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":checked") }}</td>
   <td>Selecciona un botón de opción o casilla de verificación en el estado que determines.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":current") }}</td>
   <td>Selecciona el elemento que se muestra en ese momento, o un ancestro de ese elemento.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":default") }}</td>
   <td>Selecciona uno o más elementos de interfaz de usuario cuyo valor es el predeterminado de entre un conjunto de elementos similares.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":dir") }}</td>
   <td>Selecciona un elemento según su direccionalidad (valor del atributo <code><a href="/en-US/docs/Web/HTML/Global_attributes/dir">dir</a></code> de HTML o propiedad <code><a href="/en-US/docs/Web/CSS/direction">direction</a></code> de CSS).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":disabled") }}</td>
   <td>Selecciona elementos de la interfaz de usuario que están en estado inactivo.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":empty") }}</td>
   <td>Selecciona un elemento que no tiene elementos hijo, excepto por algún espacio en blanco opcional.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":enabled") }}</td>
   <td>Selecciona elementos de la interfaz de usuario que están en estado activo.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":first") }}</td>
   <td>En <a href="/en-US/docs/Web/CSS/Paged_Media">Paged Media</a>, selecciona la primera página.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":first-child") }}</td>
   <td>Selecciona el primero entre elementos hermanos.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":first-of-type") }}</td>
   <td>Selecciona el primero entre un tipo determinado de elementos hermanos.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":focus") }}</td>
   <td>Selecciona el elemento que tiene el foco.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":focus-visible")}}</td>
   <td>Selecciona el elemento que tiene el foco cuando el foco tiene que estar visible para el usuario.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":focus-within") }}</td>
   <td>Selecciona el elemento que tiene el foco y el elemento con un descendiente que tiene el foco.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":future") }}</td>
   <td>Selecciona los elementos que van después del elemento en curso.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":hover") }}</td>
   <td>Selecciona un elemento cuando el usuario interactúa con él.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":indeterminate") }}</td>
   <td>Selecciona elementos de interfaz de usuario cuyo valor está en un estado no determinado, por lo general se trata de <a href="/es/docs/Web/HTML/Elemento/input/checkbox">casillas de verificación</a>.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":in-range") }}</td>
   <td>Selecciona un elemento cuyo valor se encuentra dentro de un rango de valores determinado.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":invalid") }}</td>
   <td>Selecciona un elemento, como por ejemplo un <code>&lt;input&gt;</code>, cuyo estado es no válido.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":lang") }}</td>
   <td>Selecciona un elemento según el idioma (valor del atributo <a href="/es/docs/Web/HTML/Atributos_Globales/lang">lang</a> de HTML).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":last-child") }}</td>
   <td>Selecciona el último elemento de entre sus elementos hermanos.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":last-of-type") }}</td>
   <td>Selecciona el último de entre los elementos hermanos de un tipo determinado.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":left") }}</td>
   <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a> selecciona las páginas de la izquierda.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":link")}}</td>
   <td>Selecciona los enlaces no visitados.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":local-link")}}</td>
   <td>Selecciona los enlaces que dirigen a páginas que se encuentran en la misma página web que el documento activo.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":is", ":is()")}}</td>
   <td>Selecciona cualquiera de los selectores de la lista de selección que se pase como valor de este selector.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":not") }}</td>
   <td>Selecciona elementos que otros selectores no han seleccionado antes y que se han pasado como valor de este selector.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-child") }}</td>
   <td>Selecciona elementos de entre una lista de elementos hermanos. Los elementos hermanos están relacionados por una fórmula del tipo <var>an + b</var> (por ejemplo, 2<var>n</var> + 1 seleccionaría los elementos 1, 3, 5, 7, etc., es decir, todos los impares).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-of-type") }}</td>
   <td>Selecciona elementos de entre una lista de elementos hermanos de un tipo determinado (por ejemplo, todos los elementos <code>&lt;p&gt;</code>). Los elementos hermanos están relacionados por una fórmula del tipo <var>an + b</var> (por ejemplo, 2<var>n</var> + 1 relacionaría en la secuencia ese tipo de elementos, los números 1, 3, 5, 7, etc., es decir, todos los impares).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-last-child") }}</td>
   <td>Selecciona elementos de entre una lista de elementos hermanos, contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo <var>an+b</var> (por ejemplo, 2<var>n<var> <em>+ 1 r</em>elacionaría en la secuencia el último de los elementos de este tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).</var></var></td>
  </tr>
  <tr>
   <td>{{ Cssxref(":nth-last-of-type") }}</td>
   <td>Selecciona los elementos de entre una lista de elementos hermanos que son de un tipo determinado (por ejemplo, elementos <code>&lt;p&gt;</code>), contando hacia atrás desde el final. Los elementos hermanos están relacionados por una fórmula del tipo <var>an+b</var> (por ejemplo, 2<var>n</var> + 1 relacionaría en la secuencia el último de los elementos de ese tipo con el que se encuentra dos por delante, y así sucesivamente. Todos los impares, contando desde el final).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":only-child") }}</td>
   <td>Selecciona un elemento que no tiene elementos hermanos.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":only-of-type") }}</td>
   <td>Selecciona un elemento que es el único de su tipo entre sus elementos hermanos.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":optional") }}</td>
   <td>Selecciona los elementos de formulario que son innecesarios.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":out-of-range") }}</td>
   <td>Selecciona un elemento cuyo valor está fuera de rango.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":past") }}</td>
   <td>Selecciona los elementos que se encuentran antes del elemento activo.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":placeholder-shown") }}</td>
   <td>Selecciona el elemento de entrada que muestra texto de marcador de posición.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":playing") }}</td>
   <td>Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede «reproducir» o «pausar», cuando el elemento está «en reproducción».</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":paused") }}</td>
   <td>Selecciona un elemento que representa un audio, un vídeo o un recurso similar que se puede “«reproducir» o «pausar» cuando el elemento está «pausado».</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":read-only") }}</td>
   <td>Selecciona los elementos que el usuario no puede modificar.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":read-write") }}</td>
   <td>Selecciona los elementos que el usuario puede modificar.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":required") }}</td>
   <td>Selecciona los elementos de formulario que son necesarios.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":right") }}</td>
   <td>En <a href="/en-US/docs/Web/CSS/CSS_Pages">Paged Media</a> selecciona las páginas de la derecha.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":root") }}</td>
   <td>Selecciona un elemento que es la raíz del documento.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":scope") }}</td>
   <td>Selecciona cualquier elemento de ámbito.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":valid") }}</td>
   <td>Selecciona un elemento como <code>&lt;input&gt;</code>, en un estado válido.</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":target") }}</td>
   <td>Selecciona el elemento al que apunta la URL activa (es decir, cuyo ID coincide con el <a href="https://en.wikipedia.org/wiki/Fragment_identifier">identificador de fragmento de la URL</a> activo).</td>
  </tr>
  <tr>
   <td>{{ Cssxref(":visited") }}</td>
   <td>Selecciona los enlaces visitados.</td>
  </tr>
 </tbody>
</table>

<h3 id="Pseudoelementos">Pseudoelementos</h3>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Selector</th>
   <th scope="col">Descripción</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ Cssxref("::after") }}</td>
   <td>Selecciona el elemento al que se puede aplicar estilo que aparece a continuación del contenido del elemento que lo origina.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::before") }}</td>
   <td>Selecciona el elemento al que se puede aplicar estilo que aparece antes del contenido del elemento que lo origina.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::first-letter") }}</td>
   <td>Selecciona la primera letra del elemento.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::first-line") }}</td>
   <td>Selecciona la primera línea del elemento de contenido.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::grammar-error") }}</td>
   <td>Selecciona una parte del documento que contiene un error de gramática indicado por el navegador.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::selection") }}</td>
   <td>Selecciona la parte del documento que ha sido seleccionada.</td>
  </tr>
  <tr>
   <td>{{ Cssxref("::spelling-error") }}</td>
   <td>Selecciona una parte del documento que contiene un error de ortografía indicado por el navegador.</td>
  </tr>
 </tbody>
</table>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>

<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">Elementos de imagen, de media y 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>