pode incorporar lógica condicional? No entanto, essa limitação pode ser contornada através de várias abordagens:

1. CLASSES CSS:

Aproveitando as classes HTML, você pode criar regras de estilo diferentes para cenários diferentes. Por exemplo, o código a seguir atribui posições de fundo distintas com base na classe:

text

text

P.Normal { Posição de fundo: 150px 8px; } P.Active { Posição de fundo: 4px 8px; }

Text
Text

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

pré -processadores CSS como o SASS fornecem instruções condicionais que permitem condições mais complexas:

$ tipo: monster; P { @if $ type == Ocean { Cor: azul; } @else se $ type == Matador { Cor: vermelho; } @else se $ type == monster { Cor: verde; } @outro { Cor: preto; } }

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

Propriedades personalizadas no CSS se comportam de maneira semelhante às variáveis ​​e são avaliadas no tempo de execução:

: root { --Maiin-BG-cor: marrom; } .um { Background-Color: var (-Main-BG-Color); } .dois { Background-Color: Black; }

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

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

.two {
  background-color: black;
}

usando um idioma do lado do servidor como o PHP, você pode pré-processar arquivos CSS com base em valores dinâmicos:

p { Posição de fundo: php echo (@$ _ get ['foo'] == 'bar')? "150": "4"; ?> px 8px; }

p {
  background-position: px 8px;
}

Ahmad Shadeed showcases novel CSS techniques to resolve common UI-based conditional logic without using if/else in his article:[CSS If/Else](https://www.sitepoint.com/css-ifelse/)