10507


現在、[オフィシャルサイト](http://getbootstrap.com/css/#forms-
example)の記述のような形でclassに値を設定しています:

[code]

    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
      </div>
      ...
    </form>
    
[/code]

このとき、 `<form>`直下の`<div>`には常に`class="form-
group"`を、また、その直下の`<input>`には常に`class="form-
control"`を設定する必要があることがわかっている場合、これらをhtml/css側で(つまり、javascriptを使用せずに)一括して指定することは可能でしょうか？

以下は私の勝手なイメージですが、このようにcssで継承関係的なものが表せる方法があるのでは…と考えましたが見つけることができませんでした。

[code]

    form > div {
      parent: .form-group;
      ...(追加の指定)...;
    
      > input {
        parent: .form-control;
        ...(追加の指定)...;
    }
    
[/code]


CC BY-SA 3.0
2015-05-22T08:10:52.953
10497
2020-10-10T11:04:52.267
2020-10-10T11:04:52.267
32986
2808
question
css twitter-bootstrap
BootstrapのCSSを用いる際にclassを一括指定したい


ＣＳＳは、対応するＨＴＭＬのスタイルを指定するものですので、  
ＨＴＭＬの構造をＣＳＳから変更することはできません。  
（ＣＳＳでスクリプトを実行するようなものは例外）

ＨＴＭＬも静的に作成されるので、エディタのような編集段階でなんらかの変換を行うようなもので無い場合動的に変更する場合javascriptを使用せずに変更することはできません。  
なので、  
結論としては  
javascriptを使わずにクラス指定がない状態から動的にクラス付けすることはできません。


CC BY-SA 3.0
2015-05-22T08:21:15.957
10498
2015-05-22T08:21:15.957
5044
10497
answer


[Can a CSS class inherit one or more other classes?
の回答](https://stackoverflow.com/a/1065476) にある通り、LESSのMixins機能で要望を満たせます。

所望のスタイルを設定する.lessファイルの内容は下記のようになるでしょう:

[code]

    @import (less) "bootstrap.css";
    
    form > div {
      .form-group;
      > input {
        .form-control;
      }
    }
    
[/code]

.htmlファイル側でこの.lessファイル及びless.jsファイルを認識させます:

[code]

    ...
    <head>
      <link rel="stylesheet/less" type="text/css" href="styles.less">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
      ...
    </head>
    ...
    
[/code]

この方法では、厳密にはjavascriptを用いていないとは言えませんが、.lessファイルを.cssファイルへ[事前に変換しておく](http://lesscss.org/#using-
less-command-line-usage)ことも可能で、そうしておけば実行時にjavascriptは真に不要となります。


CC BY-SA 3.0
2015-05-22T11:48:54.640
10507
2015-05-22T11:48:54.640
2017-05-23T12:38:55.250
-1
2808
10497
answer