web-dev-qa-db-ja.com

CSSクラスのネスト

次のようなことができますか？

.class1{some stuff}

.class2{class1;some more stuff}
csscss3css-selectors
42
kralco626

Vanilla CSSでは不可能です。ただし、次のようなものを使用できます。

SassはCSSを再び楽しくします。 SassはCSS3の拡張機能であり、ネストされたルール、変数、ミックスイン、セレクターの継承などを追加します。コマンドラインツールまたはWebフレームワークプラグインを使用して、適切にフォーマットされた標準CSSに変換されます。

または

Lessでは、セレクター名を長くして継承を指定するのではなく、セレクターを他のセレクター内に単純にネストできます。これにより、継承が明確になり、スタイルシートが短くなります。

例：

#header {
  color: red;
  a {
    font-weight: bold;
    text-decoration: none;
  }
}
55
Sarfraz

更新1：CSSレベル3のネストに関するCSS3仕様があります。現在、ドラフトです。 https://tabatkins.github.io/specs/css-nesting/

Update 2（2019）：CSSWGドラフトが作成されました https://drafts.c​​sswg.org/css-nesting-1/

承認された場合、構文は次のようになります。

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}

ステータス：元の2015年仕様提案はワーキンググループによって承認されませんでした。

43
etoxin

純粋なCSSではありません。最も近いものはこれです：

.class1, .class2 {
    some stuff
}

.class2 {
    some more stuff
}
41
cdhowie

直接ではありません。ただし、 [〜＃〜] less [〜＃〜] などの拡張機能を使用して、同じことを実現できます。

4
RabidFire

番号。

grouping selectors および/または単一の要素で複数のクラスを使用するか、テンプレート言語を使用してソフトウェアで処理し、CSSを記述できます。

CSS継承 に関する私の記事も参照してください。

3
Quentin

これを試して...

要素にIDとクラス名を付けます。次に、＃IDName.classNameをCSSにネストできます。

より良い説明があります https://css-tricks.com/multiple-class-id-selectors/

0
Oz The Tech Guy

Javascriptを使用して実行できます。

static generateStyle = (parentSelector, allCss) => {
  const reg = /(.+?)\s?\{\s?(.+?)\s?\}+/g;
  const matches = allCss.match(reg);
  const styles = [];

  for (let i = 0; i < matches.length; i++) {
    const cssDecleration = matches[ i ];

    if (cssDecleration.indexOf('@media') === -1) {
      styles.Push(`${ parentSelector } ${ cssDecleration }`);
    }
    else {
      const mediaPos = cssDecleration.indexOf('{');

      if (mediaPos === -1) {
        continue;
      }

      const mediaQuery = cssDecleration.substring(0, mediaPos);
      const rest = cssDecleration.substring(mediaPos);
      const restPlaced = MicroServiceData.generateStyle(parentSelector, rest);

      styles.Push(`${ mediaQuery } ${ restPlaced }`);

    }
  }

  return styles.join('\n');
};
0
yairniz

これが可能だとは思わない。 class1を持つすべての要素にclass2を追加できます。これが手動で行うのが実用的でない場合は、JavaScriptで自動的に行うことができます（jQueryを使用するとかなり簡単です）。

0
Kyle