回答:
従来の意味ではありませんが、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;
}
ただし、この場合、そのようなスタイルシートのキャッシュは困難になるため、パフォーマンスに影響があります。
以下は、まだ有効な私の古い回答ですが、今日はより独断的なアプローチをとっています。
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>
CSSの一種の条件文でもあるCSS疑似クラスについて誰も言及していないことに驚いています。JavaScriptを1行も使用せずに、これでかなり高度なことができます。
いくつかの疑似クラス:
例:
div { color: white; background: red }
input:checked + div { background: green }
<input type=checkbox>Click me!
<div>Red or green?</div>
cssファイルをPHPとして解析するようにサーバーを設定し、単純なPHPステートメントで変数変数を定義します。
もちろん、これはPHPを使用していることを前提としています...
@import url('dynamic.css.php')
。
(はい、古いスレッドですが、Google検索の上に表示されたため、他の人も興味を持つ可能性があります)
if / else-logicはjavascriptで実行でき、スタイルシートを動的にロード/アンロードできると思います。私はブラウザなどでこれをテストしていませんが、動作するはずです。これはあなたを始めるでしょう:
http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
すべての条件スコープにコンテナー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;
}
この目的で、次のようにJavaScriptを使用できます。
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はうまく設計されたパラダイムであり、その機能の多くはあまり使用されていません。
条件と変数によって、ある値の変更をドキュメント全体に分配する、またはある要素のスコープの下に分配するメカニズムを意味する場合、これはその方法です。
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>