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


120

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

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

この変数に応じてスタイルシートが変更されるようにしたいです!

それは次のようになります:

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

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


CSS条件を必要とする、一体何をしようとしているのですか?
Sapphire_Brick

回答:


138

従来の意味ではありませんが、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プリプロセッサがあります。そこで、次のような条件文を使用できます。

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

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


11
良い答えです。キャッシュに関して1つのポイントを追加したいと思います。ブラウザはスタイルシートをキャッシュし、通常、すべてのページでそれらを再ダウンロードしないため、PHP / [programming-language-of-choice]によって生成される「動的」スタイルシートに依存することは困難です。 。それはそれが機能するはずの方法ではありません。CSSを変更する必要がある場合は、もちろんそれをページに埋め込むことができますが、それはコンテンツとプレゼンテーションの分離に逆行し始めます。
だます

3
decezeの発言に関しては、動的に変化するWebサイトを持つことができないという意味ではありません。スタイルシートは静的なままにすることができ、要素のスタイルを変更できるように、jqueryまたはPHPの有無にかかわらずJavaScriptを使用して要素クラスを変更できます。
csga5000 2015

そして、もしあなたがスクロールバーを様式化したいならどうですか?(htmlで::-webkit-scrollbar-buttonが見つかりません)
Jerry

ええと、そうですか?それはどうですか?Sass、CSS変数、​​サーバーサイド処理はHTMLに依存しません。または、ここで何か不足していますか?
Boldewyn 2017

15

以下は、まだ有効な私の古い回答ですが、今日はより独断的なアプローチをとっています。

CSSがあまりにも多くの理由があるのは、条件付きの構文がないためです。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>

14
誰もその条件付き構文がCSSに存在しないことを示していません。条件付きコメントはHTMLにのみ存在します。
BoltClock

12

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

概念


8

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

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

background-position : 150px 8px;

もうひとつ

background-position : 4px 8px;

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

条件付きCSS


8

CSSの一種の条件文でもあるCSS疑似クラスについて誰も言及していないことに驚いています。JavaScriptを1行も使用せずに、これでかなり高度なことができます。

いくつかの疑似クラス:

  • :active-要素はクリックされていますか?
  • :checked-ラジオ/チェックボックス/オプションがチェックされていますか?(これにより、チェックボックスを使用して条件付きスタイリングが可能になります!)
  • :empty-要素は空ですか?
  • :fullscreen-ドキュメントはフルスクリーンモードですか?
  • :focus-要素にキーボードフォーカスがありますか?
  • :focus-within-要素またはその子のいずれかにキーボードフォーカスがありますか?
  • :has([selector])-要素には[selector]に一致する子が含まれていますか?(残念ながら、どの主要ブラウザでもサポートされていません。)
  • :hover-この要素の上にマウスを移動しますか?
  • :in-range /:out-of-range-入力値は最小値と最大値の間/外ですか?
  • :invalid /:valid-フォーム要素に無効/有効なコンテンツがありますか?
  • :link-これは訪問されていないリンクですか?
  • :not()-セレクターを反転します。
  • :target-この要素はURLフラグメントのターゲットですか?
  • :visited-ユーザーは以前にこのリンクにアクセスしたことがありますか?

例:

div { color: white; background: red }
input:checked + div { background: green }
<input type=checkbox>Click me!
<div>Red or green?</div>


6

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

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


2
「PHP」を「選択したプログラミングまたはテンプレート言語」に置き換えることができます
Quentin

1
問題は、CSSが50kbで、いくつかの値のみを変更している場合、静的でキャッシュされている方がいいのではないでしょうか。
アレックス

2
うん、しかし、あなたはダイナミクスを必要とする部分を抽出し、を介してそれらを再び含めることができます@import url('dynamic.css.php')
Boldewyn 2009

条件によって異なります。ユーザーごとに安定している場合は、通常のキャッシュ制御ヘッダーを出力できます。
クエンティン

5

あなたは好きなら代わりにではなく使用することができます

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

3

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



3

(はい、古いスレッドですが、Google検索の上に表示されたため、他の人も興味を持つ可能性があります)

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

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


3

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

if / elseを実行するいくつかのPHPコードを追加します

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

3

すべての条件スコープにコンテナー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{
   background-color:green;
}
.false-value p{
   background-color:red;
}

2

この目的で、次のように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>


2

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を配布することです:(使用されるフリーマーカー構文)

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>


1

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

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

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


-1

三項演算子を使用してhtmlでこれを行うだけです

class = "{{条件? 'class1': 'class2'}}"

または

[ngClass] = "条件? 'class1': 'class2'"


-2

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

<style>
    section {
        position: fixed;
        top: <?php if ($test == $tset) { echo '10px' }; ?>;
    }
</style
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.