1. ホーム
  2. ハイパーリンク

[解決済み】既存のCSSクラス以外を使用することはできますか?

2022-04-03 02:49:27

質問

あるテーブルで、存在しないCSSクラスを使ってjQueryでフルカラムを表示/非表示にしています。

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

このDOMを使えば、jQueryを使って1行でできます。 $('.target').css('display','none');

これは完全に動作しますが、定義されていないCSSクラスを使用することは有効でしょうか?そのために空のクラスを作成すべきでしょうか?

<style>.target{}</style>

副作用や、もっと良い方法はないのでしょうか?

どのように解決するのですか?

CSS class"は誤記です。 class は、HTML要素に割り当てる属性(スクリプトでいうところのプロパティ)です。つまり、CSSではなくHTMLでクラスを宣言するので、あなたの場合、"target"クラスは が行います。 マークアップはそのままで十分に有効です。

これは、必ずしもHTMLでクラスが宣言されていないとCSSで使えないということではありません。ruakhさんのコメント参照。セレクタが有効かどうか は、セレクタの構文に完全に依存します。 であり、CSSは独自の パージングエラーを処理するためのルール いずれもマークアップには全く関係ありません。つまり、HTMLとCSSは、妥当性の面で完全に独立しているのです。 1

このことを理解すれば .target ルールをスタイルシートに追加します。 2 要素にクラスを割り当てると、スタイルシート、スクリプト、またはその両方において、それらの要素をクラスで参照することができます。どちらも他への依存はありません。代わりに、それらは両方ともマークアップ(より正確には、そのDOM表現)を参照します。この原則は、jQueryのワンライナーで行っているように、JavaScriptを使ってスタイルを適用している場合にも当てはまります。

同様に、あるクラス名で要素を取得するスクリプトを書く場合、「このクラスに属する要素に対して何かをしたい」と言うことになります。 というのは、そのクラスに属する要素は、まったく別の問題です。


1 <サブ また、このような理由から CSS ID セレクタは すべて とは関係なく、与えられたIDを持つ要素 は、そのIDが一度だけ現れるか、複数回現れるか(結果として、不適合なHTML文書になります)に関係なく使用できます。

2 <サブ 私が知っている限り、このような空のCSSルールが必要な唯一の状況は、あるブラウザがバグの結果として特定の他のルールを適切に適用しない場合です。空のルールを作成すると、何らかの理由で他のルールが適用されます。参考 本解答 は、そのようなバグの例です。ただし、これはCSS側の話なので、マークアップとは関係ないはずです。