{"id":61913,"date":"2024-02-08T05:01:13","date_gmt":"2024-02-08T04:01:13","guid":{"rendered":"https:\/\/www.aulatina.com\/pseudo-elementos-y-pseudo-clases-en-css-guia-definitiva\/"},"modified":"2025-09-29T12:23:50","modified_gmt":"2025-09-29T10:23:50","slug":"pseudo-elements-and-pseudo-classes-in-css-definitive-guide","status":"publish","type":"post","link":"https:\/\/www.aulatina.com\/en\/pseudo-elementos-y-pseudo-clases-en-css-guia-definitiva\/","title":{"rendered":"Pseudo-elements and pseudo-classes in CSS definitive guide"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_83 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Tabla de contenido<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #303030;color:#303030\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #303030;color:#303030\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aulatina.com\/en\/pseudo-elementos-y-pseudo-clases-en-css-guia-definitiva\/#Pseudo-elementos_y_pseudo-clases_en_CSS_Guia_Definitiva\" >Pseudo-elementos y pseudo-clases en CSS: Gu\u00eda Definitiva<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aulatina.com\/en\/pseudo-elementos-y-pseudo-clases-en-css-guia-definitiva\/#%C2%BFQue_son_los_pseudo-elementos_en_CSS\" >\u00bfQu\u00e9 son los pseudo-elementos en CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.aulatina.com\/en\/pseudo-elementos-y-pseudo-clases-en-css-guia-definitiva\/#%C2%BFQue_son_las_pseudo-clases_en_CSS\" >\u00bfQu\u00e9 son las pseudo-clases en CSS?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.aulatina.com\/en\/pseudo-elementos-y-pseudo-clases-en-css-guia-definitiva\/#Aplicaciones_Practicas\" >Aplicaciones Pr\u00e1cticas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.aulatina.com\/en\/pseudo-elementos-y-pseudo-clases-en-css-guia-definitiva\/#Conclusion\" >Conclusi\u00f3n<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Pseudo-elementos_y_pseudo-clases_en_CSS_Guia_Definitiva\"><\/span>Pseudo-elementos y pseudo-clases en CSS: Gu\u00eda Definitiva<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>En CSS, los pseudo-elementos y pseudo-clases son herramientas poderosas que nos permiten seleccionar elementos y aplicarles estilos espec\u00edficos. En esta gu\u00eda definitiva, aprenderemos qu\u00e9 son los pseudo-elementos y pseudo-clases, c\u00f3mo utilizarlos correctamente y algunas aplicaciones pr\u00e1cticas.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_los_pseudo-elementos_en_CSS\"><\/span>\u00bfQu\u00e9 son los pseudo-elementos en CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Los pseudo-elementos nos permiten agregar contenido o estilos a un elemento sin necesidad de modificar su estructura HTML. Se utilizan para crear efectos visuales o aplicar estilos especiales a partes espec\u00edficas de un elemento.<\/p>\n<p>Existen varios pseudo-elementos, como \u00ab::before\u00bb y \u00ab::after\u00bb, que nos permiten agregar contenido antes o despu\u00e9s de un elemento. Por ejemplo, podemos utilizar \u00ab::before\u00bb para a\u00f1adir un icono antes de cada elemento de una lista.<\/p>\n<p>[css]<br \/>\nul li::before {<br \/>\n  content: \u00ab\u2b50\u00bb;<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>Tambi\u00e9n podemos utilizar pseudo-elementos para aplicar estilos a la primera letra o l\u00ednea de un elemento. Por ejemplo, podemos utilizar \u00ab::first-letter\u00bb para hacer que la primera letra de un p\u00e1rrafo sea m\u00e1s grande o tenga un color diferente.<\/p>\n<p>[css]<br \/>\np::first-letter {<br \/>\n  font-size: 2em;<br \/>\n  color: red;<br \/>\n}<br \/>\n[\/css]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"%C2%BFQue_son_las_pseudo-clases_en_CSS\"><\/span>\u00bfQu\u00e9 son las pseudo-clases en CSS?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Las pseudo-clases son selectores que nos permiten seleccionar elementos en funci\u00f3n de su estado o posici\u00f3n en la p\u00e1gina. Nos permiten aplicar estilos a elementos espec\u00edficos solo en ciertos casos. Por ejemplo, podemos utilizar la pseudo-clase \u00ab:hover\u00bb para aplicar un estilo cuando el cursor est\u00e1 sobre un enlace.<\/p>\n<p>[css]<br \/>\na:hover {<br \/>\n  color: blue;<br \/>\n}<br \/>\n[\/css]<\/p>\n<p>Otra pseudo-clase muy com\u00fan es \u00ab:nth-child\u00bb, que nos permite seleccionar elementos en funci\u00f3n de su posici\u00f3n dentro de un contenedor. Por ejemplo, podemos utilizar \u00ab:nth-child(2n)\u00bb para aplicar un estilo a cada segundo elemento de una lista.<\/p>\n<p>[css]<br \/>\nli:nth-child(2n) {<br \/>\n  background-color: lightgray;<br \/>\n}<br \/>\n[\/css]<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Aplicaciones_Practicas\"><\/span>Aplicaciones Pr\u00e1cticas<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Los pseudo-elementos y pseudo-clases tienen muchas aplicaciones pr\u00e1cticas. Por ejemplo, podemos utilizar \u00ab::before\u00bb junto con contenido generado para a\u00f1adir \u00edconos o decoraciones a elementos sin modificar su HTML.<\/p>\n<p>Tambi\u00e9n podemos utilizar pseudo-clases para aplicar estilos a enlaces visitados, a formularios cuando est\u00e1n en estado de error o a elementos que se encuentran dentro de un contenedor activo.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusi\u00f3n<span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>En resumen, los pseudo-elementos y pseudo-clases son herramientas poderosas en CSS que nos permiten seleccionar elementos y aplicar estilos espec\u00edficos. Nos permiten agregar contenido o estilos sin modificar la <a href=\"https:\/\/www.aulatina.com\/estructurando-tu-sitio-uso-de-divs-y-spans-en-html\/\">estructura HTML<\/a> y aplicar estilos basados en estados o posiciones. Aprender a utilizar correctamente los pseudo-elementos y pseudo-clases puede ayudarnos a crear dise\u00f1os m\u00e1s sofisticados y din\u00e1micos.<\/p>\n<p>\u00a1As\u00ed que no dudes en explorar y experimentar con los pseudo-elementos y pseudo-clases en tus proyectos CSS!<\/p>\n<p><a href=\"https:\/\/www.w3schools.com\/css\/css_pseudo_elements.asp\" target=\"_blank\" rel=\"noopener\">Para obtener m\u00e1s informaci\u00f3n y ejemplos sobre pseudo-elementos y pseudo-clases, visita este enlace.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Find out all about pseudo-elements and pseudo-classes in CSS. Definitive guide to apply specific styles to your web elements. Learn how to use them correctly here.<\/p>","protected":false},"author":1,"featured_media":61914,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[532],"tags":[],"class_list":["post-61913","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutoriales","category-532","description-off"],"_links":{"self":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61913","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/comments?post=61913"}],"version-history":[{"count":0,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/posts\/61913\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media\/61914"}],"wp:attachment":[{"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/media?parent=61913"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/categories?post=61913"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aulatina.com\/en\/wp-json\/wp\/v2\/tags?post=61913"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}