Você pode usar as condições if / else no CSS?

Eu gostaria de usar condições no meu CSS.

A ideia é que eu tenho uma variável que substituo quando o site é executado para gerar a folha de estilo certa.

Eu quero que de acordo com esta variável a folha de estilo mude!

Parece:

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

Isso pode ser feito? Como você faz isso?

Não no sentido tradicional, mas você pode usar classes para isso, se tiver acesso ao HTML. Considere isto:

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

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

e em seu arquivo CSS:

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

Essa é a maneira CSS de fazer isso.

Depois, há pré-processadores CSS como o Sass . Você pode usar condicionais lá, que seriam assim:

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

As desvantagens são que você precisa pré-processar suas folhas de estilo e que a condição é avaliada em tempo de compilação, não em tempo de execução.

Um recurso mais recente do CSS adequado são as propriedades personalizadas (também conhecidas como variáveis ​​CSS). Eles são avaliados em tempo de execução (em navegadores que os suportam).

Com eles, você poderia fazer algo ao longo da linha:

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

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

.two {
  background-color: black;
}

Finalmente, você pode pré-processar sua folha de estilo com sua linguagem de servidor favorita. Se estiver usando PHP, forneça um style.css.phparquivo parecido com este:

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

Nesse caso, você terá, no entanto, um impacto no desempenho, já que armazenar em cache essa folha de estilo será difícil.

Abaixo está minha resposta antiga que ainda é válida, mas hoje tenho uma abordagem mais opinativa:

Uma das razões pelas quais o CSS é tão ruim é exatamente que ele não tem sintaxe condicional. CSS é por si só completamente inutilizável na pilha da web moderna. Use o SASS por apenas um tempo e você saberá por que digo isso. O SASS tem sintaxe condicional ... e muitas outras vantagens sobre o CSS primitivo também.

Resposta antiga (ainda válida):

Isso não pode ser feito em CSS em geral!

Você tem as condicionais do navegador como:

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

Mas ninguém impede você de usar Javascript para alterar o DOM ou atribuir classes dinamicamente ou mesmo concatenar estilos em sua respectiva linguagem de programação.

Às vezes, envio classes css como strings para o modo de exibição e as ecoo no código assim (php):

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

Você pode usar calc()em combinação com var()para simular condicionais:

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

conceito

Você pode criar duas folhas de estilo separadas e incluir uma delas com base no resultado da comparação

Em um dos você pode colocar

background-position : 150px 8px;

No outro

background-position : 4px 8px;

Acho que a única verificação que você pode realizar no CSS é o reconhecimento do navegador:

CSS condicional

Estou surpreso que ninguém tenha mencionado as pseudo classes CSS, que também são uma espécie de condicionais em CSS. Você pode fazer algumas coisas bastante avançadas com isso, sem uma única linha de JavaScript.

Algumas pseudo-classes:

• : ativo - o elemento está sendo clicado?
• : marcada - O rádio / caixa de seleção / opção está marcada? (Isso permite um estilo condicional por meio do uso de uma caixa de seleção!)
• : vazio - o elemento está vazio?
• : tela inteira - O documento está no modo de tela inteira?
• : focus - O elemento tem foco de teclado?
• : focus-within - O elemento, ou algum de seus filhos, tem o foco do teclado?
• : has ([selector]) - O elemento contém um filho que corresponda a [selector]? (Infelizmente, não é compatível com nenhum dos principais navegadores.)
• : hover - O mouse passa sobre este elemento?
• : dentro da faixa /: fora da faixa - O valor de entrada está entre / fora dos limites mínimo e máximo?
• : inválido /: válido - O elemento do formulário possui conteúdos inválidos / válidos?
• : link - Este é um link não visitado?
• : not () - Inverte o seletor.
• : target - Este elemento é o destino do fragmento de URL?
• : visitado - O usuário já visitou este link antes?

Exemplo:

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

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

Configure o servidor para analisar arquivos css como PHP e, em seguida, defina a variável variável com uma instrução PHP simples.

Claro, isso assume que você está usando PHP ...

Você pode usar não em vez de se gostar

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

Pelo que eu sei, não há if / then / else no css. Alternativamente, você pode usar a função javascript para alterar a propriedade background-position de um elemento.

Ainda outra opção (com base em se você deseja que a instrução if seja avaliada dinamicamente ou não) é usar o pré-processador C, conforme descrito aqui .

(Sim, conversa antiga. Mas apareceu no topo de uma pesquisa do Google para que outras pessoas também possam se interessar)

Acho que a lógica if / else poderia ser feita com javascript, que por sua vez pode carregar / descarregar folhas de estilo dinamicamente. Não testei isso em navegadores, etc., mas deve funcionar. Isso o ajudará a começar:

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

Esta é uma pequena informação extra para a resposta de Boldewyn acima.

Adicione algum código php para fazer o if / else

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

Você pode adicionar contêiner div para todo o seu escopo de condição.

Adicione o valor da condição como uma classe ao div do contêiner. (você pode configurá-lo pela programação do lado do servidor - php / asp ...)

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

Agora você pode usar a classe do contêiner como uma variável global para todos os elementos no div usando um seletor aninhado, sem adicionar a classe a cada elemento.

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

Você pode usar javascript para essa finalidade, desta forma:

1. primeiro você define o CSS para a classe 'normal' e para a classe 'ativa'
2. então você dá ao seu elemento o id 'MyElement'
3. e agora você faz sua condição em JavaScript, algo como o exemplo abaixo ... (você pode executá-lo, alterar o valor de myVar para 5 e você verá como 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 é um paradigma bem projetado e muitos de seus recursos não são muito usados.

Se por condição e variável você entende um mecanismo para distribuir uma mudança de algum valor para todo o documento, ou sob o escopo de algum elemento, então faça o seguinte:

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>

Dessa forma, você distribui o impacto da variável entre os estilos CSS. Isso é semelhante ao que propõem @amichai e @SeReGa, mas mais versátil.

Outro truque é distribuir o ID de algum item ativo por todo o documento, por exemplo, novamente ao destacar um menu: (sintaxe do Freemarker usada)

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, isso só é prático com um conjunto limitado de itens, como categorias ou estados, e não conjuntos ilimitados como produtos de e-shop, caso contrário, o CSS gerado seria muito grande. Mas é especialmente conveniente ao gerar documentos offline estáticos.

Mais um truque para fazer "condições" com CSS em combinação com a plataforma de geração é 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>

Se você está aberto para usar jquery, pode definir declarações condicionais usando javascript no HTML:

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

Isso mudará a cor do texto de .classpara verde se o valor da variável for maior que 0.

apenas faça isso em html usando o operador ternário, caso contrário

classe = "{{condição? 'classe1': 'classe2'}}"

ou

[ngClass] = "condição? 'classe1': 'classe2'"

Você pode usar php se escrever css na tag

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