¿Cómo se escriben las reglas CSS específicas de una URL?

No estoy muy seguro de si es el enfoque correcto para que un determinado widget se comporte de manera diferente dependiendo de la URL en la que se use.

Es mejor que cree varios widgets independientes de URL, un widget por propósito. Use un precompilador CSS y OOCSS para mantener la mayor parte de su CSS / estilo reutilizable en todos sus widgets.

Si eso no es posible, aún puede agregar una clase o identificación al elemento HTML de sus páginas para ‘espacio de nombres’ en sus widgets.

HTML:

CSS:
.subpage .myWidget { background: red; }

HTML:

CSS:
.main .myWidget { background: blue; }

Si está desarrollando para Firefox solamente, podría echar un vistazo a @document domain() pero no estoy seguro de si todavía es compatible ya que ha sido una característica experimental desde entonces
@documento

En mi opinión, no tiene sentido escribir un dominio CSS dependiente.

Vayamos con la solución de WordPress, pero para esto necesitará acceso al código del tema.
Simplemente agregue a la etiqueta , que debe estar en su header.php o en un archivo de tema diferente (consulte con el desarrollador del tema si está perdido), la función “body_class”, de la siguiente manera:
>

Esto generará para usted, en class = “” el ID de la publicación / página, el nombre de la categoría y más cosas buenas, ¡y puede agregar reglas CSS relacionadas con esta información!

Puede hacer referencia a esto en el códice WP en Referencia de función / clase de cuerpo

¡Feliz codificación!

La respuesta negativa:
No puede hacer referencia a URL en CSS. Puede hacer referencia a elementos en el DOM (

etc.) lo que significa que sus mejores opciones son …

La respuesta del servidor:
Si está utilizando WordPress, considere controlar la salida de la página de una de estas formas utilizando PHP:

  • Agregue una clase al elemento que desea manipular
  • Agregue una regla CSS que dependa de la categoría o página que desea que sea diferente.
  • Cargue diferentes hojas de estilo CSS basadas en una de esas variables (página / categoría / url, etc.)

La respuesta del cliente:
Use Javascript para:

  • Agregue una clase al área manipulada según sus condiciones.
  • Agregue el CSS en línea usando jquery’s .css();
  • Cargue una hoja de estilo CSS separada según sus condiciones.

Cualquiera que elija dependerá de sus prioridades y cuán escalable debe ser su solución.

Si está variando el CSS según el tamaño de la pantalla o el tipo de dispositivo, intente usar consultas @media en su CSS.