[解決済み】既存のCSSクラス以外を使用することはできますか?
質問
あるテーブルで、存在しない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側の話なので、マークアップとは関係ないはずです。
関連
-
[解決済み】エラー。要求されたURL"[no URL]"は無効です。
-
[解決済み] text-overflow: 省略記号が機能しない
-
[解決済み] HTML Divのボーダーが表示されない
-
[解決済み] margin-block-startとmargin-topの違いは何ですか?
-
[解決済み] Font Awesome アイコンをプレースホルダーで使用する
-
[解決済み] Add a scrollbar to a <textarea> [duplicate]
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】iframeを水平方向にセンタリングする方法は?
-
[解決済み] bodyタグに追加された奇妙なiframe、`rufous-sandbox`について
-
[解決済み] IFrameからボーダーを取り除く
-
[解決済み] ChromeのデベロッパーツールでHTML Bodyにcz-shortcut-listen="true "が表示される?
-
[解決済み] :last-child が期待通りに動作しない?
-
[解決済み] 順序なしリストが div 内で左いっぱいに整列されない
-
[解決済み] divが重ならないようにするには?
-
[解決済み] Visual Studio Code CSSエラー「空のルールセットを使用しないでください」【終了しました
-
[解決済み】CSSセレクタのクラス名は大文字・小文字を区別する?
-
[解決済み] ある文字列で始まるすべてのIDを選択するjQueryまたはCSSセレクタ [重複]。