{"id":1455,"date":"2024-05-22T22:18:43","date_gmt":"2024-05-22T22:18:43","guid":{"rendered":"https:\/\/orpot.com\/blog\/?p=1455"},"modified":"2024-05-22T22:25:35","modified_gmt":"2024-05-22T22:25:35","slug":"css-especificidad","status":"publish","type":"post","link":"https:\/\/orpot.com\/blog\/css-especificidad\/","title":{"rendered":"CSS: Especificidad"},"content":{"rendered":"<header class=\"article-header\">\n<p class=\"title\">La\u00a0<strong>especificidad<\/strong>\u00a0es la manera mediante la cual los navegadores deciden qu\u00e9 valores de una propiedad CSS son m\u00e1s relevantes para un elemento y, por lo tanto, ser\u00e1n aplicados. La especificidad est\u00e1 basada en las reglas de coincidencia que est\u00e1n compuestas por diferentes tipos de\u00a0selectores CSS.<\/p>\n<\/header>\n<article class=\"article-content\">Tenemos 4 espacios, y cada uno de ellos comienza en 0: 0 0 0 0. El espacio m\u00e1s a la izquierda es el m\u00e1s importante, y el m\u00e1s a la derecha es el menos importante.Funciona como los n\u00fameros en el sistema decimal: 1 0 0 0 es mayor que 0 1 0 0.El primer espacio, el m\u00e1s a la derecha, es el menos importante.Incrementamos este valor cuando tenemos un selector de elemento. Un elemento es un nombre de etiqueta. Si tienes m\u00e1s de un selector de elemento en la regla, incrementas el valor almacenado en este espacio en consecuencia.<\/p>\n<p>Ejemplos:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p {} \/* 0 0 0 1 *\/\r\n\r\nspan {} \/* 0 0 0 1 *\/\r\n\r\np span {} \/* 0 0 0 2 *\/\r\n\r\np &gt; span {} \/* 0 0 0 2 *\/\r\n\r\ndiv p &gt; span {} \/* 0 0 0 3 *\/<\/pre>\n<p>El segundo espacio se incrementa por 3 cosas:<\/p>\n<p>&#8211; selectores de clase<br \/>\n&#8211; selectores de pseudo-clase<br \/>\n&#8211; selectores de atributos (los aprenderemos muy pronto)<br \/>\nCada vez que una regla cumple con uno de esos, incrementamos el valor de la segunda columna desde la derecha.<\/p>\n<p>Ejemplos:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.name {} \/* 0 0 1 0 *\/\r\n.users .name {} \/* 0 0 2 0 *\/\r\n[href$='.pdf'] {} \/* 0 0 1 0 *\/\r\n:hover {} \/* 0 0 1 0 *\/<\/pre>\n<p>Esto es lo que sucede cuando combinas selectores \u00abespacio 2\u00bb con selectores \u00abespacio 1\u00bb:<\/p>\n<pre><\/pre>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div .name {} \/* 0 0 1 1 *\/\r\na[href$='.pdf'] {} \/* 0 0 1 1 *\/\r\n.pictures img:hover {} \/* 0 0 2 1 *\/<\/pre>\n<pre>\"Espacio 3\" contiene lo m\u00e1s importante que puede afectar la especificidad de tu CSS en un archivo CSS: el id.<\/pre>\n<p>Cada elemento puede tener asignado un atributo id, y podemos usarlo en nuestra hoja de estilo para apuntar al elemento.<\/p>\n<p>Ejemplos:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">#name {} \/* 0 1 0 0 *\/\r\n.user #name {} \/* 0 1 1 0 *\/\r\n#name span {} \/* 0 1 0 1 *\/<\/pre>\n<p>\u00abEspacio 4\u00bb se ve afectado por estilos en l\u00ednea. Los estilos en l\u00ednea son reglas CSS definidas en el HTML mismo, utilizando el atributo style.<\/p>\n<p>Cualquier estilo en l\u00ednea tendr\u00e1 precedencia sobre cualquier regla definida en un archivo CSS externo, o dentro de la etiqueta style en el encabezado de la p\u00e1gina.<\/p>\n<p>Ejemplo:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">&lt;p style=\"color: red\"&gt;Test&lt;\/p&gt; \/* 1 0 0 0 *\/<\/pre>\n<p>Incluso si otra regla en el CSS define el color, esta regla de estilo en l\u00ednea se aplicar\u00e1.<\/p>\n<p>Excepto por un caso: si se usa !important, lo que llena \u00abespacio 5\u00bb.<\/p>\n<p>Una nota sobre !important<br \/>\nLa especificidad no importa si una regla termina con !important:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">p { \u00a0 font-size: 20px !important; }<\/pre>\n<p>Esa regla tendr\u00e1 precedencia sobre cualquier regla con m\u00e1s especificidad.<\/p>\n<p>Agregar !important en una regla CSS har\u00e1 que esa regla sea m\u00e1s importante que cualquier otra regla, seg\u00fan las reglas de especificidad.<\/p>\n<p>La \u00fanica manera de que otra regla tome precedencia es tener !important tambi\u00e9n, y tener una especificidad m\u00e1s alta en los otros espacios menos importantes.<\/p>\n<p>Generalmente, !important no deber\u00eda tener lugar en tus archivos CSS. A veces lo uso para pruebas r\u00e1pidas, para averiguar por qu\u00e9 una regla no se aplica. Si no aparece con !important, hay un problema en alg\u00fan lugar.<\/p>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>La\u00a0especificidad\u00a0es la manera mediante la cual los navegadores deciden qu\u00e9 valores de una propiedad CSS&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1464,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1455"}],"collection":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/comments?post=1455"}],"version-history":[{"count":5,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1455\/revisions"}],"predecessor-version":[{"id":1465,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/posts\/1455\/revisions\/1465"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media\/1464"}],"wp:attachment":[{"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/media?parent=1455"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/categories?post=1455"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orpot.com\/blog\/wp-json\/wp\/v2\/tags?post=1455"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}