¿Cuál es la especificidad de CSS y cómo funciona?

Supongamos que está creando un sitio web y desea que todos sus enlaces sean de color rosa brillante para que se destaquen del resto del texto de la página, que es negro de forma predeterminada. Para los enlaces internos, no solo desea cambiar el color de la fuente, sino también ponerlos en negrita para agregar un toque adicional. Esto puede aumentar las posibilidades de que los visitantes hagan clic en ellos y permanezcan más tiempo en su sitio.

Para diseñar estos elementos HTML en su sitio web, necesita selectores de CSS. Los selectores de CSS son modificadores que definen los elementos que desea diseñar con CSS. Hay diferentes tipos de selectores de CSS, cada uno con su propia sintaxis única que le dice al navegador a qué elementos aplicar CSS.

Continuando con el ejemplo anterior, supongamos que agrega selectores de CSS dirigidos a todos los[href] artículos un[href] elementos que contienen el nombre específico de su sitio web (estos son sus enlaces internos). Los define con las propiedades font-weight y font-color, respectivamente. Pero cuando accede a la vista previa de cambios de la interfaz de usuario, no ve el formato de enlace interno correcto. ¿De qué se trata?

Probablemente haya infringido una de las reglas específicas de CSS y, como resultado, tendrá que volver al código para intentar corregir el error. Es un dolor, pero es muy común. La especificidad de CSS es uno de los conceptos más importantes y más difíciles de aprender en CSS.

En esta publicación, explicaremos para qué es específico CSS, luego discutiremos las reglas mediante las cuales puede aplicar CSS correctamente a su proyecto web y evitar tener que buscar errores en su código.

Antes de ver las diversas reglas de especificidad de CSS, definamos claramente los niveles de detalle para cada tipo de selector de CSS. A continuación se muestra la llamada «jerarquía de especificidad». Comienza con los tipos de selectores con el detalle más alto al más bajo.

1. Selectores de ID: Los selectores de ID son los más detallados. Eligen un elemento en función de su atributo ID y tienen la sintaxis #idname.
2. Selectores de clase, selectores de atributo y selectores de pseudoclase:
   y) C.Los selectores Lass seleccionan todos los elementos en la clase CSS y tienen la sintaxis Nombre de la clase.
   b) Los selectores de atributos seleccionan todos los elementos que tienen el atributo dado y tienen sintaxis [attr].
   C) Los selectores de pseudoclase solo seleccionan elementos si se encuentran en un estado especial, como visitados o pasados ​​por encima, y ​​tienen la sintaxis selector: pseudoclase.
   d) Estos tres tipos de selectores son de igual especificidad.
3. Selectores de tipo: selecciona todos los elementos HTML que tienen el nombre de nodo dado y tienen un elemento de sintaxis.
4. Selectores universales: Selector universal

no tiene efecto sobre la especificidad.

Reglas sobre los detalles de CSS

Hay una serie de reglas de CSS que debe comprender antes de escribir HTML y CSS. Veámoslos a continuación

Regla 1: Usa un selector de CSS más detallado.

Si el elemento HTML está dirigido por varios selectores, el navegador aplicará la regla CSS del selector con la mayor granularidad.

Supongamos que un elemento está dirigido por un selector de ID y un selector de clase. En este caso, debido a que el selector de ID tiene más granularidad, el estilo CSS del selector de ID se aplicará al elemento en lugar del estilo del selector de clase.

Echemos un vistazo a un ejemplo que demuestra este principio a continuación.

Por ejemplo, suponga que desea que los elementos de los botones sean de color granate en Bootstrap. Luego use el selector de clase para definir todos los elementos en la clase de botón para que tengan un color de fondo granate (código de color hexadecimal # 80000) y un color de fuente blanco (#FFFFFF). Pero desea que el botón de suscripción en su página de inicio sea la excepción, hágalo más llamativo. Luego puede usar el selector de ID para definir un botón con la «página de inicio» de la ID para que tenga un color de fondo fucsia (# FF00FF) y un color de fuente negro (# 000000). Todos los botones de Bootstrap sin el ID de «inicio» seguirán la regla CSS del selector de clase.

 
 
  #homepage {
   background-color: #FF00FF;
   color: #000000;
}
.btn {
   background-color: #800000;
   color: #FFFFFF;
}
 

Aquí está el CSS:

Aquí está el código HTML:

 
 
  <button type="button" class="btn" id="homepage">Subscribe</button>
<button type="button" class="btn">Subscribe</button>

Dos estilos de botones diferentes para demostrar la regla del tipo de selector con mayor detalle ganador

Fuente de imagen

Regla 2: si los selectores de CSS tienen la misma granularidad, se aplica esta última.

Si se aplican varios selectores al mismo elemento HTML y tienen el mismo nivel de detalle, el navegador aplicará la regla del selector CSS que apareció más adelante en la hoja de estilo.

Veamos de nuevo el ejemplo anterior. Suponga que aplicó ambos selectores a los elementos del botón Bootstrap, cada uno con diferentes reglas para la fuente y los colores de fondo, pero los selectores eran selectores de clase. Entonces se aplicaría este último.

 
 
  .btn {
   background-color: #FF00FF;
   color: #000000;
}
.btn {
   background-color: #800000;
   color: #FFFFFF;
}
 

Aquí está el CSS:

 
 
  <button type="button" class="btn" id="homepage">Subscribe</button>
<button type="button" class="btn">Subscribe</button>

Aquí está el código HTML:

Los mismos estilos de botón demuestran el orden de la regla de verbosidad

Fuente de imagen

Regla 3: CSS en línea tiene el más alto nivel de detalle.

CSS se puede escribir de tres maneras: en línea, en la sección documento HTML o en una hoja de estilo CSS externa. El estilo en línea, también conocido como «hoja de estilo incorporada», tiene el mayor detalle y gana automáticamente.

Esto tiene sentido dado el principio anterior que muestra que el orden importa. El CSS en línea es lo más parecido a un elemento HTML, por lo que es más específico y, por lo tanto, se usa. Veamos un ejemplo que demuestra este principio a continuación.

 
 
  .btn {
   background-color: #FF00FF;
   color: #FFFFFF;
}
 

Aquí está el CSS de la sección:

 
 
  <button type="button" class="btn" style="background-color: #800000">Subscribe</button>
<button type="button" class="btn">Subscribe</button>

Aquí está el código HTML:

Dos estilos diferentes de botones para mostrar el principio de especificidad de estilo en línea

Fuente de imagen

¿Cómo sortear los detalles en CSS?

En CSS, la propiedad Importante es una excepción a todas las reglas de especificidad enumeradas anteriormente y, por lo tanto, anula todas las demás declaraciones de elementos.

Si bien puede tener la tentación de usar esta regla, en lugar de seguir muchas otras reglas de granularidad al combinar valores de propiedad, no lo haga. Usar!Importante se considera una mala práctica porque rompe la cascada natural de las hojas de estilo. Esto hace que sea mucho más difícil mantener y depurar su sitio, especialmente si está trabajando con un equipo de desarrollo.

Hay varios casos de uso en los que puede usar la propiedad Importante, por ejemplo, al definir las clases de utilidad, por lo que veremos brevemente el ejemplo a continuación.

Suponga que desea que cada elemento que señala una clase de botón se vea como el mismo botón. A continuación, aplica las propiedades de estilo únicas con el selector de clase .btn. Todo bien hasta ahora. Al crear su sitio web, agrega una nueva sección llamada ID «contenido» que contiene un enlace con la clase de botón. También agrega otra regla a su CSS definiendo todos los elementos con el nombre de identificador «contenido» para que tengan un marco azul discontinuo.

Ahora tiene dos selectores dirigidos al mismo elemento HTML. Y como sabemos, dado que el selector de ID es más granular que el selector de clase, el estilo CSS del selector de ID tiene prioridad sobre el estilo CSS del selector de clase. el segundo elemento por lo tanto, tendría un borde azul discontinuo en lugar de uno negro sólido. Para evitar esto y garantizar que las propiedades de estilo de la clase .btn se apliquen a todos los elementos bajo ese nombre de clase, independientemente del tipo de selector o el orden, puede agregar la propiedad Importante.

 
 
  .button {
   background: red            !important;
   color: white               !important;
   padding: 3px               !important;
   border-radius: 5px         !important;
   border: 1px solid black    !important;
}
#content a {
   border: 1px dotted blue;
}
 

Aquí está el CSS:

 
 
  <a href="#" class="button">Do Thing</a>
<section id="content">
   <p>  text text blah <a href="#" class="button">Do Thing</a>  </p>
</section>

Aquí está el código HTML:

Dos estilos de botón que demuestran una importante excepción de propiedad

Fuente de imagen

Refinamiento de tu CSS