Qué es y como funciona la Especificidad en CSS

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.

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

span {
  text-transform:uppercase;
}

div h1 span {
    text-transform: lowercase;
}

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

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

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

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

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

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

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

<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;
}

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

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

<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>

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

<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>
   

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