Contenido

  1. Cómo se aplican los estilos CSS
    1. Cómo funciona la Especificidad en CSS
      1. Especificidad con elementos HTML como selectores
        1. Las Clases tienen mayor peso que los Elementos
          1. ¿Qué selector reescribe una clase?
            1. Más específicos para reescribir una Clase.
              1. ¿Qué selector reescribe una clase + elementos + atributos?
                1. ¿Qué reescribe un ID?
                  1. ¿Qué reescribe 2 ID’s?
                    1. ¿Existe un selector para reescribir n cantidad de ID’s + Classes + Elementos + Atributos?
                      1. ¿Qué reescribe un estilo lineal?

                        La especificidad en CSS determinará que elementos son aplicados sobre otros. Si bien CSS se aplica de arriba hacia abajo en tu hoja de estilos, en algunos casos no es suficiente y mientras más específico sea un elemento “ganará” sobre otros para aplicarse.

                        Cómo se aplican los estilos CSS

                        Supongamos que tenemos el siguiente código HTML.

                        <p>Hola Mundo</p>

                        Si en nuestra hoja de estilos definidos:

                        p {
                          color: red;
                        }
                        p {
                          color: blue;
                        }

                        El resultado será el siguiente:

                        See the Pen bPJvvY by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Debido a que las hojas de estilo se aplican de arriba hacia abajo, el segundo párrafo reescribe el primero y se aplica el color azul.

                        Cómo funciona la Especificidad en CSS

                        Tal vez te ha pasado que en algunas ocasiones quieres reescribir la apariencia de un elemento con CSS y notas que el código que escribiste no se aplica. También algunas ocasiones notarás que CSS que fue declarado muy arriba en tu hoja de estilos, reescribe el que esta abajo.

                        ¿Porqué un código que esta en la parte superior de la hoja de estilos se aplica sobre el que esta en la parte inferior? y ¿porqué a veces no es posible reescribir un elemento? La respuesta es: La especificidad en CSS.

                        Para ello cada selector que escribes recibe un peso, mientras mayor sea el peso, más específico es y se aplicará sobre otros elementos.

                        El selector con menor peso ( y menos valor ) es el universal, que en CSS se define de la siguiente forma:

                        * {
                          margin:0;
                          padding:0;
                        }

                        Este selector en CSS tiene un valor de 0-0-0, eso quiere decir que cualquier otro selector cuyo valor sea 1-0-0, 0-1-0 incluso 0-0-1 tendrá mayor peso que el y lo reescribirá, por lo tanto este selector se utiliza poco, en especial para realizar reset’s en tus sitios web o para aplicar el Box-Sizing recomendado por Paul Irish que utilizo en todos mis tutoriales. Supongamos de nueva cuenta el siguiente código HTML:

                        <p>Hola Mundo</p>

                        Con un CSS de esta forma:

                        * {
                          font-size: 30px;
                        }

                        See the Pen GbLxXW by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Se puede decir que el selector universal – * – es el más débil de todos y puede ser reescrito muy fácilmente si agregamos una etiqueta como en el siguiente caso:

                        See the Pen ewoMaa by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Hasta aquí puede parecer un comportamiento normal, pero si cambias el orden de tus instrucciones CSS notarás como el selector con el párrafo se mantiene sobre el universal:

                        See the Pen VJNXom by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Esto pasa por que el selector universal * tiene un peso de 0-0-0 mientrsa que el selector con un elemento HTML ( en este caso un p ) tiene un peso de 0-0-1, al ser un valor mayor que el anterior, su peso es mayor y CSS entiende que su especificidad también es mayor y gana sobre el anterior selector a pesar de estar declarado más arriba en la hoja de estilos.

                        Especificidad con elementos HTML como selectores

                        Ya que vimos que la especificidad del selector universal es la más debil, continuaremos con los elementos HTML que son los siguientes en ese orden. Para este ejemplo utilizaremos el siguiente HTML

                        <div>
                          <h1><span>Bienvenidos</span> a nuestro sitio web</h1>
                        </div>

                        Si deseas hacer mayusculas el texto de bienvenidos, podrías hacerlo con un CSS como el siguiente:

                        span {
                          text-transform:uppercase;
                        }

                        Y el resultado sería el siguiente:

                        See the Pen LKvmVR by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Un código como el anterior, como ya vimos, tiene un peso de 0-0-1 y puedes notar que tenemos 3 etiquetas HTML, por lo tanto podríamos reescribir el código anterior de la siguiente forma:

                        div h1 span {
                            text-transform: lowercase;
                        }

                        Que incluso colocando el elemento sobre el span, lo reescribirá y aplicará minusculas:

                        See the Pen ZdZoWg by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Esto pasa porque de nueva cuenta, el selector con el span tiene un peso de 0-0-1 mientras que el primero con div h1 span, tiene un peso de 0-0-3, – el 3 siendo la cantidad de elementos HTML declarados – por lo tanto si agregas 5 Selectores de elementos anidados, el peso será de 0-0-5. De nueva cuenta, mayor peso en la especificidad será el ganador.

                        Las Clases tienen mayor peso que los Elementos

                        El siguiente elemento en cuanto a peso son las clases, las clases tienen mayor peso (o especificidad) que los elementos HTML y que el selector universal, de nueva cuenta utilizaremos el siguiente ejemplo pero con una clase llamada mayusculas:

                        <div>
                          <h1><span class="mayusculas">Bienvenidos</span> a nuestro sitio web</h1>
                        </div>

                        El resultado de aplicar el siguiente CSS (Primero la clase) y después el selector de 3 niveles.

                        See the Pen zVXjwr by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Y puede estar la clase en la parte superior o inferior del selector de 3 Elementos y aún así se aplicará, esto pasa porque las clases tienen un peso de 0-1-0 mientras que nuestro selector de 3 elementos será de 0-0-3.

                        Existen otros elementos que tienen el mismo peso de 0-1-0:

                        *.mayusculas { }  /* peso de 0-1-0 */
                        *[type="checkbox"]{ }  /* peso de 0-1-0 */
                        :last-of-type { }  /* peso de 0-1-0 */

                        ¿Qué selector reescribe una clase?

                        Vimos anteriormente que un selector de una clase como .mayusculas tendrá un peso de 0-1-0, y si recuerdas un elemento HTML tiene un peso de 0-0-1, entonces ¿qué selector reescribe una clase? la respuesta es: class + Elemento. De nueva cuenta supongamos que tenemos el siguiente código HTML:

                        <div>
                          <h1><span class="mayusculas">Bienvenidos</span> a nuestro sitio web</h1>
                        </div>

                        La clase de mayusculas puede ser reescrita de la siguiente forma:

                        See the Pen orOdow by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        En este caso el selector span.mayusculas tendrá un peso de 0-1-1, ya que se sumaria el valor del span ( 0-0-1 ) al de la clase (0-1-1).

                        Existe un selector (bastante extraño) que reescribe el anterior:

                        See the Pen MMRGQY by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        El primer selector es más especifico que el de class + Elemento debido a que también utiliza un atributo, cuando agregas un atributo como el primer selector su peso será de 0-1-2 que lo hace mayor al de class + Elemento que es de 0-1-1.

                        Más específicos para reescribir una Clase.

                        Puedes agregar más especificidad en tu CSS para reescribir una clase, por ejemplo un selector de 2 elementos más 1 atributo también reescribirá una clase, este selector tendrá un peso también de 0-1-2 (debido a los 2 elementos HTML y una clase).

                        See the Pen NZmMMJ by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Supongamos el siguiente HTML para los siguientes ejemplos:

                        <ul>
                          <li class="azul">JavaScript</li>
                          <li class="azul">CSS</li>
                          <li class="azul">HTML</li>
                          <li class="azul">React</li>
                        </ul>

                        El siguiente código CSS reescribirá el color azul en el tercer elemento de la lista:

                        ul li:nth-of-type(3n) {
                          color: red;
                        }
                        li.azul {
                          color:blue;
                        }

                        See the Pen gNyzBB by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Esto pasa debido a que el selector li:nth-of-type(3n) cuenta con 3 características: 1 Elemento, 1 Clase y 1 Pseudoclase (nth-of-type) lo que le da un valor de 0-2-1 .

                        Ahora supongamos el siguiente HTML:

                        <ul>
                          <li class="azul">JavaScript</li>
                          <li class="azul">CSS</li>
                          <li class="azul minusculas">HTML</li>
                          <li class="azul">React</li>
                        </ul>
                        

                        Y el siguiente CSS

                        li.azul.minusculas{
                          text-transform:lowercase;
                        }
                        li.azul {
                          color:blue;
                          text-transform:uppercase;
                        }

                        Nos dará como resultado:

                        See the Pen bPJMyP by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Esto pasa porque 2 clases tendrán un peso de 0-2-0 a diferencia de una clase 0-1-0.

                        ¿Qué selector reescribe una clase + elementos + atributos?

                        Ya vimos que una clase puede ser reescrita por 2 clases, o por 1 clase + 1 elemento o 1 clase + atributo, pero también se puede reescribir por medio de un ID, para ello veamos el siguiente HTML y CSS:

                        <ul>
                          <li class="azul">JavaScript</li>
                          <li class="azul">CSS</li>
                          <li id="minusculas" class="azul">HTML</li>
                          <li class="azul">React</li>
                        </ul>
                        
                        #minusculas {
                          text-transform:lowercase;
                        }
                        li.azul {
                          color:blue;
                          text-transform:uppercase;
                        }

                        Nos darán como resultado:

                        See the Pen wLZXBL by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Cuando agregas un ID como parte de tu CSS es de los selectores más específicos en este caso el ID tendrá un peso de 1-0-0 mientras que el de clase + elemento 0-1-1.

                        ¿Qué reescribe un ID?

                        Existen otras combinaciones para reescribir un ID (pueden ser 2 ID’s o un ID + clase + elemento + atributo o cualquier combinación de estas). No es muy recomendable llenar de ID’s tu HTML ya que con el tiempo lo harán más difícil de reescribir conforme tu sitio o aplicación web crezca. Si cambiamos un poco nuestro HTML de la siguiente forma:

                        <ul id="aprendizaje">
                          <li>JavaScript</li>
                          <li>CSS</li>
                          <li id="minusculas">HTML</li>
                          <li>React</li>
                        </ul>

                        Supongamos el siguiente código CSS:

                        #aprendizaje #minusculas {
                          text-transform:lowercase;
                        }
                        #aprendizaje {
                          text-transform: uppercase;
                        }

                        Lo cual nos dará como resultado:

                        See the Pen VJNdKG by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        ¿Qué reescribe 2 ID’s?

                        Hay diferentes formas de reescribir 2 ID’s (peso de 2-0-0) y una es agregando una clase – que le dará un peso total de 2-1-0), puedes verlo en el siguiente código (puedes ignorar la contrariedad de tener un id llamado mayusculas y una clase llamada minusculas)

                        See the Pen orOyBM by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Puedes continuar agregando ID’s + Clases + Elementos + Atributos + Pseudo elementos para hacer un selector que tenga mucho peso y reescribir un elemento.

                        ¿Existe un selector para reescribir n cantidad de ID’s + Classes + Elementos + Atributos?

                        Veamos como pasarle por encima a una combinación bastante compleja de selector CSS como podría ser el anterior, la respuesta es: estilos lineales, si bien se puede sentir como si estuvieras escribiendo código de los 90’s ( o de un email) en algunos casos podrán ser útiles, para ello supongamos el siguiente HTML (Bastante horrible el markup) pero apoya lo que se trata de enseñar:

                        <ul id="tecnologias">
                          <li id="elemento1" class="mayusculas">JavaScript</li>
                          <li id="elemento2">React</li>
                          <li id="elemento3">Node</li>
                          <li id="elemento4">MongoDB</li>
                        </ul>

                        y un CSS como el siguiente:

                        #tecnologias #elemento1.mayusculas {
                          text-transform:uppercase;
                        }

                        Tendremos como resultado:

                        See the Pen pXBKdR by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Agregarle estilos lineales de la siguiente forma:

                        <ul id="tecnologias">
                          <li id="elemento1" class="mayusculas" style="text-transform:lowercase;">JavaScript</li>
                          <li id="elemento2">React</li>
                          <li id="elemento3">Node</li>
                          <li id="elemento4">MongoDB</li>
                        </ul>
                           

                        Nos permitirá reescribir el texto a minusculas:

                        See the Pen dBLKdw by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Esto pasa debido a que el código 2 Id’s + Clase tiene un peso de 2-1-0 mientras que el código de estilos lineales tiene un peso de 1-0-0-0, sin duda es una opción, pero es la menos re-utilizable de todas.

                        ¿Qué reescribe un estilo lineal?

                        La respuesta corta es un !important.

                        See the Pen pXBKKe by Juan Pablo De la torre Valdez (@juandevwp) on CodePen.

                        Si bien !important no tiene nada que con especificidad, de hecho podrías tener un CSS así:

                        .mayusculas {
                          text-transform:uppercase!important;
                        }

                        Y aún así reescribiría cualquier combinación de 2 ID’s (o 20 ID’s) ya que más bien esta diseñado para pasar por encima de todos los estilos, se recomienda usarlo con cautela ya que si comienzas a agregar !important en bastantes lugares de tus hojas de estilos te será más complicado debuggear o reescribir algún elemento.

                        En cuanto al !important tiene un peso de 1-0-0-0-0 lo cual hace complicado que con alguna de las combinaciones anteriores se pueda reescribir.

                        Algo importante a tomar en cuenta es que si tienes 2 elementos !important, ganará el que tenga un peso mayor por la especificidad que vimos a lo largo de esta entrada ( y si ambos tienen el mismo peso se mostrará el último declarado en la hoja de estilos).

                        De esta forma pudiste aprender que es la especificidad en CSS y porque algunas ocasiones tu código CSS no se aplica en un elemento determinado y como escribir código para que lo tome.

                        Este sitio web no tiene botones para compartir en tus redes sociales (esos botones son para rastrear tu actividad) pero si esta entrada fue de tu agrado, compártela con alguien que pueda ayudarle.

                        Continua tu aprendizaje Otras Entradas en Nuestro Blog...