web-dev-qa-db-ja.com

CSSでif / else条件を使用できますか？

CSSで条件を使用したいと思います。

アイデアは、正しいスタイルシートを生成するためにサイトを実行するときに置き換える変数があるということです。

この変数に従ってスタイルシートが変わるようにしたい！

次のようになります。

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

これはできますか？これどうやってやるの？

cssstylesheetconditional-statements
100
Haim Evgi

従来の意味ではありませんが、HTMLにアクセスできる場合は、これにクラスを使用できます。このことを考慮：

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

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

そしてあなたのCSSファイルで：

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

それがCSSの方法です。

次に、 Sass のようなCSSプリプロセッサがあります。そこに conditionals を使用できます。これは次のようになります。

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

欠点は、スタイルシートを前処理しなければならないこと、および条件が実行時ではなくコンパイル時に評価されることです。

適切なCSSの新しい機能は カスタムプロパティ （別名CSS変数）です。それらは実行時に評価されます（それらをサポートするブラウザーで）。

それらを使用すると、ラインに沿って何かをすることができます：

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

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

.two {
  background-color: black;
}

最後に、お気に入りのサーバー側言語でスタイルシートを前処理できます。 PHPを使用している場合は、次のようなstyle.css.phpファイルを提供します。

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

ただし、この場合、このようなスタイルシートをキャッシュするのは難しいため、パフォーマンスに影響があります。

116
Boldewyn

以下はまだ有効な私の古い答えですが、今日はもっと意見のあるアプローチがあります：

CSSが非常にひどい理由の1つは、条件付き構文がないことです。 CSSは、それ自体が最新のWebスタックではまったく使用できません。 SASSを少しの間使用すれば、なぜ私がそう言うのかわかるでしょう。 SASSには条件付き構文があり、プリミティブCSSよりも多くの利点があります。

古い回答（まだ有効）：

一般的にCSSではできません！

次のようなブラウザの条件があります。

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

ただし、Javascriptを使用してDOMを変更したり、クラスを動的に割り当てたり、それぞれのプログラミング言語でスタイルを連結したりすることを妨げるものはありません。

私は時々cssクラスを文字列としてビューに送信し、そのようなコードにエコーします（php）：

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

2つの別個のスタイルシートを作成し、比較結果に基づいてそのうちの1つを含めることができます

のいずれかにあなたが置くことができます

background-position : 150px 8px;

もう一つ

background-position : 4px 8px;

CSSで実行できる唯一のチェックはブラウザの認識だと思います。

条件付きCSS

8
RaYell

CssファイルをPHPとして解析するようにサーバーを設定し、単純なPHPステートメントで変数変数を定義します。

もちろん、これはPHPを使用していることを前提としています...

6
beggs

のような場合の代わりにnotを使用できます

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

calc()をvar()と組み合わせて使用​​して、条件を模倣することができます。

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

概念

4
yeedle

これは、上記のBoldewynの回答に対する追加情報です。

If/elseを実行するPHPコードを追加します

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

（はい、古いスレッド。ただし、Google検索の上部に表示されるため、他のユーザーも興味を持っている可能性があります）

If/else-logicはjavascriptで実行でき、スタイルシートを動的にロード/アンロードできると思います。ブラウザなどでこれをテストしていませんが、動作するはずです。これで開始できます：

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

3
josteinaj

さらに別のオプション（ifステートメントを動的に評価するかどうかに基づいて）は、 here で説明されているように、Cプリプロセッサーを使用することです。

3
Michiel Buddingh

すべての条件スコープにコンテナdivを追加できます。

条件値をクラスとしてコンテナdivに追加します。 （サーバー側のプログラミングで設定できます-php/asp ...）

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

ネストされたセレクタを使用して、各要素にクラスを追加せずに、コンテナクラスをdiv内のすべての要素のグローバル変数として使用できるようになりました。

.true-value p{
   backgrounf-color:green;
}
.false-value p{
   backgrounf-color:red;
}
3
amichai

私の知る限り、cssにはif/then/elseはありません。または、javascript関数を使用して、要素のbackground-positionプロパティを変更できます。

3
hadi teo

CSSはうまく設計されたパラダイムであり、その機能の多くはあまり使用されていません。

条件と変数によって、ある値の変更をドキュメント全体に、またはある要素のスコープの下で配布するメカニズムを意味する場合、これはその方法です。

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>

これにより、CSSスタイル全体に変数の影響を分散できます。これは@amichaiと@SeReGaが提案するものに似ていますが、より用途が広いです。

別のそのようなトリックは、ドキュメント全体でアクティブなアイテムのIDを配布することです。再びメニューを強調表示するとき：（使用される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>

確かに、これはカテゴリや状態などのアイテムのセットが限られている場合にのみ実用的であり、eショップ商品のような無制限のセットではありません。そうでない場合、生成されるCSSは大きすぎます。ただし、静的なオフラインドキュメントを生成する場合は特に便利です。

生成プラットフォームと組み合わせてCSSで「条件」を実行するもう1つのトリックは次のとおりです。

.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>
2
Ondra Žižka

この目的でjavascriptを使用するには、次のようにします。

  1. 最初に、「通常」クラスと「アクティブ」クラスにCSSを設定します
  2. 次に、要素にid 'MyElement'を与えます
  3. そして、次の例のようなJavaScriptで条件を作成します...（実行して、myVarの値を5に変更すると、どのように機能するかがわかります）
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>
1
SeReGa

Jqueryを使用する場合は、html内のjavascriptを使用して条件ステートメントを設定できます。

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

これにより、変数の値が.classより大きい場合、0のテキストの色が緑色に変わります。

1
Kyle Lillie

タグにcssを記述すると、phpを使用できます

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