CSSクラスは1つ以上の他のクラスを継承できますか？

私は長い間Webプログラマーであり、この質問への答えを知らなかったのでは馬鹿げています。 。

私の質問は、別のCSSクラス（または複数）から「継承」するCSSクラスを作成できるかどうかです。

たとえば、次のようにしたとします。

.something { display:inline }
.else      { background:red }

私がしたいことは次のようなものです：

.composite 
{
   .something;
   .else
}

「.composite」クラスはインラインで表示され、背景が赤になります。

LESSなどのツールがあります。これを使用すると、記述したものと同様の抽象化のより高いレベルでCSSを作成できます。

これらを「ミックス」と呼ぶことは少ない

の代わりに

/* CSS */

#header {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#footer {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

あなたは言えた

/* LESS */

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

#header {
  .rounded_corners;
}

#footer {
  .rounded_corners;
}

たとえば、単一のDOM要素に複数のクラスを追加できます。

<div class="firstClass secondClass thirdclass fourthclass"></div>

後のクラス（またはより具体的なクラス）で指定されたルールはオーバーライドされます。したがって、fourthclassその例ではそのようなものが優勢です。

継承はCSS標準の一部ではありません。

はい、ただしその構文では正確ではありません。

.composite,
.something { display:inline }

.composite,
.else      { background:red }

共通の属性をまとめて、特定の（またはオーバーライドする）属性を再度割り当てます。

/*  ------------------------------------------------------------------------------ */   
/*  Headings */ 
/*  ------------------------------------------------------------------------------ */   
h1, h2, h3, h4
{
    font-family         : myfind-bold;
    color               : #4C4C4C;
    display:inline-block;
    width:900px;
    text-align:left;
    background-image: linear-gradient(0,   #F4F4F4, #FEFEFE);/* IE6 & IE7 */
}

h1  
{
    font-size           : 300%;
    padding             : 45px 40px 45px 0px;
}

h2
{
    font-size           : 200%;
    padding             : 30px 25px 30px 0px;
}

要素は複数のクラスを取ることができます：

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

そして、それは残念ながらあなたが手に入れようとしていることとほぼ同じです。いつかこのクラスエイリアスと一緒にこの機能を見たいです。

いいえ、あなたは次のようなことはできません

.composite 
{
   .something;
   .else
}

これは、オブジェクト指向の意味での「クラス」名ではありません。.somethingそして.else何よりも、単にセレクタがあります。

ただし、要素に2つのクラスを指定できます。

<div class="something else">...</div>

または別の形の継承を調べるかもしれません

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

段落backgroundcolorとcolorは、.fooスタイル設定されている囲んでいるdivの設定から継承されます。正確なW3C仕様を確認する必要がある場合があります。inheritとにかくほとんどすべてのプロパティのデフォルトですが、すべてではありません。

私はこれと同じ問題に遭遇し、JQueryソリューションを使用して、クラスが他のクラスを継承できるように見せかけました。

<script>
    $(function(){
            $(".composite").addClass("something else");
        });
</script>

これにより、クラス「composite」を持つすべての要素が見つかり、クラス「something」および「else」が要素に追加されます。のよう<div class="composite">...</div>に何かがそうなるでしょう：
<div class="composite something else">...</div>

この例のSCSSの方法は、次のようになります。

.something {
  display: inline
}
.else {
  background: red
}

.composite {
  @extend .something;
  @extend .else;
}

詳細は、sassの基本を確認してください

あなたができる最善はこれです

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

忘れないでください：

div.something.else {

    // will only style a div with both, not just one or the other

}

Cssファイル：

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

この質問は非常に古いことに気づきましたが、ここでは何も起こりません！

ネイティブソリューションとして、複数のクラスのプロパティを意味する単一のクラスを追加することを意図している場合は、JavaScript / jQueryを使用することをお勧めします（jQueryは実際には必要ありませんが、確かに役立ちます）。

あなたが持っている場合、例えば.umbrellaClass、それは「継承」していて、すぐに起動するJavaScriptを持っている可能性が.baseClass1あり.baseClass2ます。

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

これで、のすべての要素が.umbrellaClass両方.baseClassののすべてのプロパティを持ちます。OOP継承と同様に、.umbrellaClass、独自のプロパティがある場合とない場合があります。

ここでの唯一の注意点は、このコードが起動したときに存在しない動的に作成される要素があるかどうかを検討することですが、その周りにも簡単な方法があります。

ただし、cssには、ネイティブの継承はありません。

完璧なタイミング：この質問から私のメールに行って、Lessに関する記事を見つけました、特にこれを実行するRubyライブラリである：

の super よう に見えますfooterが、フォントが異なるため、Lessのクラスインクルードテクニック（ミックスインと呼ばれます）を使用して、これらの宣言も含めるように指示します。

#super {
  #footer;
  font-family: cursive;
}

残念ながら、CSSは、C ++、C＃、Javaなどのプログラミング言語のように「継承」を提供しません。CSSクラスを宣言してから、それを別のCSSクラスで拡張することはできません。

ただし、マークアップのタグに複数のクラスを適用することができます。この場合、ブラウザによって適用される実際のスタイルを決定する高度なルールセットがあります。

<span class="styleA styleB"> ... </span>

CSSは、マークアップに基づいて適用できるすべてのスタイルを探し、それらの複数のルールのCSSスタイルを組み合わせます。

通常、スタイルはマージされますが、競合が発生した場合、後で宣言されたスタイルが一般的に優先されます（いずれかのスタイルで！important属性が指定されている場合を除きます）。また、HTML要素に直接適用されたスタイルは、CSSクラススタイルよりも優先されます。

SASSもあり、http： //sass-lang.com/にあります。@extendタグと、ミックスインタイプシステムがあります。（ルビー）

それはLESSの競争相手のようなものです。

CSSではそれは不可能です。

CSSでサポートされている唯一のものは、別のルールよりも具体的です。

span { display:inline }
span.myclass { background: red }

クラス「myclass」のスパンには両方のプロパティがあります。

もう1つの方法は、2つのクラスを指定することです。

<div class="something else">...</div>

「else」のスタイルは「something」のスタイルをオーバーライド（または追加）します

このclass = "something other"のようなものによって、要素に複数のCSSクラスを適用できます

他の人が言ったように、要素に複数のクラスを追加できます。

しかし、それは本当の意味ではありません。継承についての質問を受け取ります。本当のポイントは、CSSの継承がクラスではなく、要素階層を通じて行われることです。したがって、継承された特性をモデル化するには、それらをDOMの要素のさまざまなレベルに適用する必要があります。

私はクレイジーなものも探していましたが、別のことを試してみてそれを見つけました：P ...

composite.something, composite.else
{
    blblalba
}

それは突然私のために働きました:)

特定の状況では、「ソフト」継承を行うことができます。

.composite
{
display:inherit;
background:inherit;
}

.something { display:inline }
.else      { background:red }

これは、.compositeクラスを子要素に追加する場合にのみ機能します。.compositeで指定されていない値は明らかに継承されないため、これは「ソフト」継承です。「継承」の代わりに「インライン」と「赤」を書くだけでも、文字が少なくなることに注意してください。

プロパティのリストと、これらが自動的に実行されるかどうかを次に示します。https： //www.w3.org/TR/CSS21/propidx.html

直接の継承は不可能ですが。

親タグにクラス（またはID）を使用し、CSSコンビネーターを使用して、子タグの動作を階層から変更することができます。

p.test{background-color:rgba(55,55,55,0.1);}
p.test > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}
p.test > span > span > span > span > span > span > span > span{background-color:rgba(55,55,55,0.1);}

<p class="test"><span>One <span>possible <span>solution <span>is <span>using <span>multiple <span>nested <span>tags</span></span></span></span></span></span></span></span></p>

例のように多くのスパンを使用することはお勧めしませんが、これは概念の証明にすぎません。この方法でCSSを適用しようとすると、まだ多くのバグが発生する可能性があります。（たとえば、テキスト装飾タイプの変更）。

LessとSassは、CSS言語を貴重な方法で拡張するCSSプリプロセッサです。それらが提供する多くの改善の1つは、あなたが探しているオプションにすぎません。Lessには非常に良い答えがいくつかあります。Sassソリューションを追加します。

Sassには、1つのクラスを別のクラスに完全に拡張できる拡張オプションがあります。この記事で読むことができる拡張の詳細

実際には、あなたが求めているものが存在します-しかし、それはアドオンモジュールとして行われます。.NETのBetter CSSに関するこの質問を確認してください例として。

LESSの使用に関するラーセナルの回答をチェックして、これらのアドオンの機能を理解してください。

CSSはあなたが求めていることを実際には行いません。その複合的なアイデアを念頭に置いてルールを作成したい場合は、コンパスをチェックしてください。これは、すでに述べたLessに似たスタイルシートフレームワークです。

それはあなたがmixinとそのすべての良いビジネスをすることを可能にします。

上記の（優れた）投稿に満足していない場合は、プログラミングスキルを使用して変数（PHPまたはいずれか）を作成し、複数のクラス名を格納できます。

それは私が思いつくことができる最高のハックです。

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

次に、クラス名自体ではなく、目的の要素にグローバル変数を適用します

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

CSS composeを見てください： ください https //bambielli.com/til/2017-08-11-css-modules-composes/

彼らによると：

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

反応プロジェクトで使用しています。

css クラスをオブジェクト指向のクラスと考えないでください。それらは、html要素のスタイルを設定する属性クラスを指定するための他のセレクターの中での単なるツールと考えてください。中かっこの間のすべてを属性クラスと考えます。左側のセレクタは、属性クラスから属性を継承するように選択した要素に指示します。例：

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}

要素に属性が指定されているclass="foo"場合、それをクラス.fooから属性を継承するのではなく、属性クラスAおよび属性クラスBから継承すると考えると便利です。つまり、継承グラフは1レベルの深さであり、属性クラスから派生する要素と、エッジがどこに行くかを指定するセレクターと、競合する属性がある場合に優先順位を決定します（メソッド解決順序と同様）。

プログラミングの実際的な意味はこれです。上記のスタイルシート.bazがあり、と同じである新しいクラスを追加するとfont-sizeし.fooます。素朴な解決策はこれです：

.foo, .bar { font-weight : bold; font-size : 2em; /* attribute class A */}
.foo { color : green; /* attribute class B */}
.baz { font-size : 2em; /* attribute class C, hidden dependency! */}

私は何かを2回入力しなければならないときはいつでも、私はとても怒っています！だけでなく、私はそれを2回記述する必要があります、今私はプログラム的にことを示す方法はありません.fooし、.baz同じを持つべきfont-size、と私が作成した隠された依存関係を！ 上記のパラダイムはfont-size、属性クラスAから属性を抽象化する必要があることを示唆しています。

.foo, .bar, .baz { font-size : 2em; /* attribute base class for A */}
.foo, .bar { font-weight : bold; /* attribute class A */}
.foo { color : green; /* attribute class B */}

ここでの主な不満は、属性クラスAからすべてのセレクターを再入力して、選択する必要がある要素も属性基本クラスAから属性を継承するように指定する必要があることです。それでも、代替手段は、何かが変更されるたびに隠された依存関係があるすべての属性クラスを編集することを忘れないようにするか、サードパーティのツールを使用することです。最初のオプションは神を笑わせ、2番目のオプションは私を自殺したくなります。

LESSよりも強力なテキストプリプロセッサが必要な場合は、PPWizardを確認してください。

http://dennisbareis.com/ppwizard.htm

ウェブサイトは本当に恐ろしいものであり、学習曲線はわずかですが、CSSとHTMLの両方をマクロで構築するのに最適です。なぜより多くのウェブコーダーがそれを使わないのか私には理解できませんでした。

phpを介して.cssファイルを前処理すれば、希望どおりの結果を得ることができます。...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...