¿Puedes usar condiciones if / else en CSS?

Me gustaría usar condiciones en mi CSS.

La idea es que tengo una variable que reemplazo cuando se ejecuta el sitio para generar la hoja de estilo correcta.

¡Lo quiero para que de acuerdo con esta variable cambie la hoja de estilo!

Parece que:

[if {var} eq 2 ]
    background-position : 150px 8px;
[else]
    background-position : 4px 8px; 

Se puede hacer esto? ¿Cómo haces esto?

No en el sentido tradicional, pero puede usar clases para esto, si tiene acceso al HTML. Considera esto:

<p class="normal">Text</p>

<p class="active">Text</p>

y en su archivo CSS:

p.normal {
  background-position : 150px 8px;
}
p.active {
  background-position : 4px 8px;
}

Esa es la forma CSS de hacerlo.

Luego están los preprocesadores CSS como Sass . Puede usar condicionales allí, que se verían así:

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

Las desventajas son que está obligado a preprocesar sus hojas de estilo y que la condición se evalúa en tiempo de compilación, no en tiempo de ejecución.

Una característica más nueva de CSS propiamente dicha son las propiedades personalizadas (también conocidas como variables CSS). Se evalúan en tiempo de ejecución (en los navegadores que los admiten).

Con ellos podrías hacer algo en la línea:

:root {
  --main-bg-color: brown;
}

.one {
  background-color: var(--main-bg-color);
}

.two {
  background-color: black;
}

Finalmente, puede preprocesar su hoja de estilo con su idioma del lado del servidor favorito. Si está usando PHP, entregue un style.css.phparchivo, que se parece a esto:

p {
  background-position: <?php echo (@$_GET['foo'] == 'bar')? "150" : "4"; ?>px 8px;
}

En este caso, sin embargo, tendrá un impacto en el rendimiento, ya que el almacenamiento en caché de dicha hoja de estilo será difícil.

A continuación se muestra mi respuesta anterior, que sigue siendo válida, pero hoy tengo un enfoque más obstinado:

Una de las razones por las que CSS apesta tanto es exactamente que no tiene sintaxis condicional. CSS es en sí completamente inutilizable en la pila web moderna. Use SASS por un momento y sabrá por qué digo eso. SASS tiene sintaxis condicional ... y MUCHAS otras ventajas sobre CSS primitivo también.

Respuesta anterior (aún válida):

¡No se puede hacer en CSS en general!

Tienes los condicionales del navegador como:

/*[if IE]*/ 
body {height:100%;} 
/*[endif]*/

Pero nadie le impide usar Javascript para alterar el DOM o asignar clases dinámicamente o incluso concatenar estilos en su respectivo lenguaje de programación.

A veces envío clases css como cadenas a la vista y las hago eco en el código así (php):

<div id="myid" class="<?php echo $this->cssClass; ?>">content</div>

Puede usar calc()en combinación con var()para imitar condicionales:

:root {
--var-eq-two: 0;
}

.var-eq-two {
    --var-eq-two: 1;
}

.block {
    background-position: calc(
        150px * var(--var-eq-two) +
        4px * (1 - var(--var-eq-two))
    ) 8px;
}

concepto

Puede crear dos hojas de estilo independientes e incluir una de ellas según el resultado de la comparación

En uno de los puedes poner

background-position : 150px 8px;

En el otro

background-position : 4px 8px;

Creo que la única verificación que puede realizar en CSS es el reconocimiento del navegador:

CSS condicional

Me sorprende que nadie haya mencionado las pseudoclases de CSS, que también son una especie de condicionales en CSS. Puede hacer algunas cosas bastante avanzadas con esto, sin una sola línea de JavaScript.

Algunas pseudoclases:

• : active - ¿Se hace clic en el elemento?
• : comprobado - ¿Está marcada la radio / casilla de verificación / opción? (¡Esto permite un estilo condicional mediante el uso de una casilla de verificación!)
• : vacío - ¿El elemento está vacío?
• : pantalla completa: ¿el documento está en modo de pantalla completa?
• : focus - ¿El elemento tiene foco de teclado?
• : focus-within - ¿El elemento, o alguno de sus elementos secundarios, tiene enfoque de teclado?
• : has ([selector]) - ¿El elemento contiene un elemento secundario que coincide con [selector]? (Lamentablemente, no es compatible con ninguno de los principales navegadores).
• : hover - ¿Se desplaza el mouse sobre este elemento?
• : dentro del rango /: fuera del rango - ¿Está el valor de entrada entre / fuera de los límites mínimo y máximo?
• : inválido /: válido - ¿El elemento de formulario tiene contenido no válido / válido?
• : enlace - ¿Es este un enlace no visitado?
• : not () - Invierte el selector.
• : target - ¿Este elemento es el destino del fragmento de URL?
• : visitado - ¿El usuario ha visitado este enlace antes?

Ejemplo:

div { color: white; background: red }
input:checked + div { background: green }

<input type=checkbox>Click me!
<div>Red or green?</div>

Configure el servidor para analizar archivos css como PHP y luego defina la variable variable con una declaración PHP simple.

Por supuesto, esto supone que estás usando PHP ...

Puedes usar not en lugar de if like

.Container *:not(a)
{
    color: #fff;
}

Hasta donde yo sé, no hay if / then / else en css. Alternativamente, puede usar la función javascript para alterar la propiedad de posición de fondo de un elemento.

Otra opción más (basada en si desea que la instrucción if se evalúe dinámicamente o no) es usar el preprocesador C, como se describe aquí .

(Sí, hilo antiguo. Pero apareció en la parte superior de una búsqueda de Google, por lo que otros también podrían estar interesados)

Supongo que la lógica if / else podría hacerse con javascript, que a su vez puede cargar / descargar dinámicamente hojas de estilo. No he probado esto en navegadores, etc. pero debería funcionar. Esto te ayudará a comenzar:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Esta es una pequeña información adicional a la respuesta de Boldewyn anterior.

Agregue un código php para hacer el if / else

if($x==1){
  print "<p class=\"normal\">Text</p>\n";
} else {
  print "<p class=\"active\">Text</p>\n";
}

Puede agregar div contenedor para todo el alcance de su condición.

Agregue el valor de la condición como una clase al contenedor div. (puede configurarlo mediante la programación del lado del servidor - php / asp ...)

<!--container div-->
<div class="true-value">
   <!-- your content -->
   <p>my content</p>
   <p>my content</p>
   <p>my content</p>
</div>

Ahora puede usar la clase contenedora como una variable global para todos los elementos en el div usando un selector anidado, sin agregar la clase a cada elemento.

.true-value p{
   background-color:green;
}
.false-value p{
   background-color:red;
}

Puede usar javascript para este propósito, de esta manera:

1. primero configura el CSS para la clase 'normal' y para la clase 'activa'
2. luego le das a tu elemento el id 'MyElement'
3. y ahora haces tu condición en JavaScript, algo como el ejemplo a continuación ... (puedes ejecutarlo, cambiar el valor de myVar a 5 y verás cómo funciona)

var myVar = 4;

if(myVar == 5){
  document.getElementById("MyElement").className = "active";
}
else{
  document.getElementById("MyElement").className = "normal";
}

.active{
  background-position : 150px 8px;
  background-color: black;
}
.normal{
  background-position : 4px 8px; 
  background-color: green;
}
div{
  width: 100px;
  height: 100px;
  }

<div id="MyElement">
  
  </div>

CSS es un paradigma muy bien diseñado y muchas de sus características no se utilizan mucho.

Si por condición y variable te refieres a un mecanismo para distribuir un cambio de algún valor a todo el documento, o bajo el alcance de algún elemento, entonces así es como se hace:

var myVar = 4;
document.body.className = (myVar == 5 ? "active" : "normal");

body.active .menuItem {
  background-position : 150px 8px;
  background-color: black;
}
body.normal .menuItem {
  background-position : 4px 8px; 
  background-color: green;
}

<body>
<div class="menuItem"></div>
</body>

De esta forma, distribuye el impacto de la variable en todos los estilos CSS. Esto es similar a lo que proponen @amichai y @SeReGa, pero más versátil.

Otro truco de este tipo es distribuir el ID de algún elemento activo en todo el documento, por ejemplo, nuevamente al resaltar un menú: (se usa la sintaxis de Freemarker)

var chosenCategory = 15;
document.body.className = "category" + chosenCategory;

<#list categories as cat >
    body.category${cat.id} .menuItem { font-weight: bold; }
</#list>

<body>
<div class="menuItem"></div>
</body>

Claro, esto solo es práctico con un conjunto limitado de elementos, como categorías o estados, y no conjuntos ilimitados como productos de tienda electrónica, de lo contrario, el CSS generado sería demasiado grande. Pero es especialmente conveniente al generar documentos estáticos sin conexión.

Un truco más para hacer "condiciones" con CSS en combinación con la plataforma de generación es este:

.myList {
   /* Default list formatting */
}
.myList.count0 {
   /* Hide the list when there is no item. */
   display: none;
}
.myList.count1 {
   /* Special treatment if there is just 1 item */
   color: gray;
}

<ul class="myList count${items.size()}">
<!-- Iterate list's items here -->
<li>Something...</div>
</ul>

Si está abierto a usar jquery, puede establecer declaraciones condicionales usando javascript dentro del html:

$('.class').css("color",((Variable > 0) ? "#009933":"#000"));

Esto cambiará el color del texto de .classa verde si el valor de Variable es mayor que 0.

solo haz esto en html usando un operador ternario, no si no

class = "{{condición? 'class1': 'class2'}}"

o

[ngClass] = "condición? 'class1': 'class2'"

Puede usar php si escribe css en la etiqueta

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style