指定の頁のセレクタにのみCSSを適用させる方法を教えてください

指定の頁のセレクタにのみCSSを適用させたい
サイト内全体にセレクタが指定してありますが、どのように指定されているのかわかりません。
個別の頁作成時に、普通にセレクタを指定すると必ず干渉しまいます
例えば、h2 {プロパティ: 値;}、p {プロパティ: 値;}、div {プロパティ: 値;}
よって、h2.sample{プロパティ: 値;}、p.sample {プロパティ: 値;}、div.sample {プロパティ: 値;}、.sample{プロパティ: 値;}
という方法を使っていますが、それでも干渉しあうものがあります
その場合は!important;を記述しています。
HTMLは以下の通りです

<h2 class="プロパティ">テキスト</h2> <p class="プロパティ">テキスト</p> <div class="プロパティ">テキスト</p> !important;を記述せずに指定のセレクタに適用させる方法はありませんかまた、HTMLを上記のように毎回記述するため手間がかかりますよい方法があればご教示いただけると幸いです何卒よろしくお願いいたします。

<style>
h2.sample {
color: red;
font-weight: bold;
}
</style>
<h2 class="kimari">テキスト</h2>

１/３０追記
色々試してみましたが、どうしてもh2とh3タグだけが反映されません
画像を添付しましたのでご確認いただけると幸いです
何卒宜しくお願い致します。

1/31追記
私の拙い説明で申し訳ございません。
説明を追記します
頁を作成する場合、HTMLタグやCSSが他のHTMLタグやCSSから影響を受けないよう記述しなければなりません。
ページ自体とその他のヘッターやフッター等と干渉しあうものがあるので、HTML記述の際にタグに「class」や「id」を定義する必要があるということです
「*・body div・p span・div p span・見出しタグ」等直接指定できません
例えば、body {}、div{}、p span{}、div p span{}の記述は干渉します
また、下記のように記述しても干渉します

<h2 class="sample">テキスト</h2> <div class="sample"> <h2>HTMLテキスト</h2> <p>HTMLテキスト</p> 干渉を受けないように「class」や「id」の定義の仕方（記述の方法）を教えてください何卒宜しくお願い致します

maisumakun

2025/01/30 07:57

えっと、「サイト全体にかかっているCSSを除外したページを作りたい」ということでしょうか。あまりに質問が抽象的すぎますので、もう少し掘り下げて状況説明がほしいところです。

juner

2025/01/30 08:05

各頁事に id とか class は指定されていないんでしょうか？究極 data-page="1" みたいな独自属性でも可能ですが

Lhankor_Mhy

2025/01/30 23:51

質問の変更を拝読。おそらく、ここに書かれていないコードの影響であろうかと思います。

Lhankor_Mhy

2025/02/01 04:20

コードのご提示をいただけないと、これ以上のお手伝いは難しそうです。

行動規範の内容に同意します

回答4件

ようこそ、CSSの沼へ！
とりあえず結論を書きます。

セレクタはクラス名の指定だけにしましょう
全てのクラス名をユニークにしましょう

まず、ひとつのサイトで同じコンポーネント（ページの部品）は同じデザインである、ということが前提です。
あるページのサイドバーのリンクが、別のページでは全然別の場所に別のデザインで配置されている、となると閲覧する人のためにならないからです。
ですので、同じコンポーネントに対するスタイルは、『干渉』を気にしなくていいというか、原則として同じになるべきです。

違うコンポーネントについて『干渉』が起きてしまう場合、これはおおむねクラスの名づけが悪いです。
原則として、完全に同じ意味を持つためデザインが完全に同じであるべき要素以外は、全て別のクラス名にすれば『干渉』はしません。

簡単に言うと、

html
1<style>
2    .user-card {
3        /* ... */
4    }
5
6    .user-card h1 {
7        /* ... */
8    }
9
10    .user-card .info {
11        /* ... */
12    }
13</style>
14<div class="user-card">
15    <h1></h1>
16    <div class="info"></div>
17</div>

↑こうではなくて↓こう書きましょう、ということです。

html
1<style>
2    .user-card {
3        /* ... */
4    }
5
6    .user-card__name {
7        /* ... */
8    }
9
10    .user-card__info {
11        /* ... */
12    }
13</style>
14<div class="user-card">
15    <h1 class="user-card__name"></h1>
16    <div class="user-card__info"></div>
17</div>

これについては、BEMというCSS設計手法（とその分派）が一般に使われています。

ただ、BEMにせよ、その派生のOOCSSにせよ、SassやCSS変数が本格的に使われるようになる前の思想でして、2025年現在に古典的なCSS設計を忠実に使うのが正しいのか、疑問が残るところです。
さらに、@layerや@scopeの実装により、これらの手法は今後使われなくなっていくかもしれません。
また、別の設計思想を持つBootstrapやTailwindのようなユーティリティクラスベースのCSSライブラリなどもありますし、VueやReactなどではスコープ付きCSSなどのライブラリを使ってクラス名をユニークにビルドすることもあります。

質問の変更を受けて追記

もし、ご質問の内容が「あるページのスタイルを別のスタイルの干渉を受けずに書きたいが、別のスタイルを変更できない｜したくない」ということであるなら、カスケードレイヤーはどうでしょうか。

html
1    <div class="test">.test は、赤字イタリック</div>
2    <style>
3        @layer test{
4            .test {
5                color: red;
6                font-style: italic;
7            }
8        }
9    </style>
10    <h1 class="test">h1.test は、赤字イタリックではない</h1>
11    <style>
12        h1 {
13            all: revert;
14        }
15    </style>

ただし、完全に干渉から逃れられるかというと、そういうことはないだろうと思います。
CSSファイルからの読み込みであれば、@import test.css layer(test)のように、@importルールで読み込んでください。

投稿2025/01/30 08:33

編集2025/01/31 01:21

Lhankor_Mhy

総合スコア37207

takami3

2025/01/30 12:54

ご回答いただき誠にありがとうございます色々試してみました、教えていただいたコードに簡単に記述してみましたが、どうしてもh2とh3タグだけが反映されません画像を添付しましたのでご確認いただけると幸いです何卒宜しくお願い致します。

juner

2025/01/30 13:01

F12 の要素（Element）パネルで対象の要素のスタイルを確認したらいいのではないでしょうか？ https://sqripts.com/2023/12/14/82607/

Lhankor_Mhy

2025/01/30 23:53

質問の補足欄にも書きましたが、おそらく提示されている部分のコードだけでは解決することはできません。回答に書いた、「セレクタはクラス名の指定だけ」「全てのクラス名をユニークに」は、全てのページの全てのスタイルで実行するものです。

Lhankor_Mhy

2025/01/31 01:13

追記しました。

takami3

2025/01/31 02:55

Lhankor_Mhy様ご回答ありがとうございますおっしゃる通りカスケードレイヤーでも解決はできませんでした。しかし指定しないものを指定できるので使い道があると感じます色々試してみますありがとうございます

Lhankor_Mhy

2025/01/31 03:42 編集

> 指定しないものを指定できるそうではないのです…… カスケードレイヤーとして指定すると、優先度を下げることができるのです。優先度を下げれば、後から書いたスタイルで上書きできるのです。上書きができるということは、別のスタイルから干渉されないということなのです。

juner

2025/01/31 04:04

> カスケードレイヤーでも解決はできませんでした。もしかして別ファイルで予め読み込んでいませんか？（ @import するならそれを廃さないと意味が無いのでは？

takami3

2025/01/31 05:12

ご説明ありがとうございます干渉されないようにする方法の一つとして理解しますありがとうございます

takami3

2025/01/31 05:12

別ファイルで読み込んではいません

Lhankor_Mhy

2025/02/06 07:02

別質問で、実は @import を使っていないとのことお聞きしました。正しく伝わっていなかったようです。また、おそらく、「別ファイルで読み込んではいません」というコメントについても正しくは伝わっていなさそうです。質問に、「サイト内全体にセレクタが指定してありますが、どのように指定されているのかわかりません」とあります。まずは、このスタイルを指定しているファイルを見つけてみましょう。<link rel="stylesheet" ... で始まるタグがあるはずです。これが「別ファイルで読み込んでいる」ということです。

Lhankor_Mhy

2025/02/12 04:39

CSSファイルの見つけるのは難しそうですか？他の質問を読んだのですが、もしかして、CMSのようなコンテンツ管理システム上でHTMLを書いていませんか？　なので、サイトのベースCSSには触ることができないとか、そういうことではありませんか？

Lhankor_Mhy

2025/02/18 07:33

CMSのようなコンテンツ管理システム上でページの一部のHTMLを書いていて、その他の部分にまったく干渉できない、ということでしたら。CSSでの解決方法はないと思っていいです。!important または詳細度を強めて書いていくしかないかと思います。当方の推測は当たっていましたでしょうか？

行動規範の内容に同意します

CSSの優先順位は詳細度によります。正しい詳細度設定すればそうしかなりません

詳細度 - CSS: カスケーディングスタイルシート | MDN

投稿2025/01/30 08:01

yambejp

総合スコア117203

takami3

2025/01/30 12:57

回答ありがとうございます。調べてみたのですが私にはとても難しく理解できませんでした

Lhankor_Mhy

2025/01/31 03:14 編集

> takami3 さん CSS詳細度が理解できないのであれば、CSSを書くのは難しいかもしれません。 ↓こちらの文書はわかりやすいと思うのですが、いかがですか。 https://pepabo.github.io/css/specificity/ もしこの文書を読んで、今後も理解できる見込みがなさそうであれば、CSSでHTMLをデザインすることを諦める検討をしてみてもいいのかもしれません。（BootstrapやTailwindを使う、他人に作らせる、など）

takami3

2025/01/31 05:13

分かりやすい内容でしたありがとうございます

行動規範の内容に同意します

どのように指定されているのかわかりません。

まずは、それを特定するのが先決かと思います。ブラウザ内の検証ツールで、どんなセレクタでCSSを適用しているのかも確認できます。

投稿2025/01/30 08:06

maisumakun

総合スコア146329

Windows 11、Edge、Chrome、Firefoxで確認しました。

画像のHTMLとブラウザー表示が合ってないです。
エディターの表示していない部分に何かあると思います。

最初に「test」がある
最初の「緑」と「テキストテキストテキスト」のサイズが違う
<h3>の「緑」に下線がある

<style>
    .user-card {
        font-size: 2em;
    }

    .user-card__name {
        color: blue;
    }

    .user-card__info {
        color: green;
    }
</style>
<div class="user-card">
    <h1 class="user-card__name">青</h1>
    <div class="user-card__info">緑</div>
    <p>テキスト<span>テキスト</span>テキスト</p>
</div>
<h2 class="user-card__name">緑</h2>
<p>テキスト<span class="user-card__info">midori</span>テキスト</p>
<h3 class="user-card__name">緑</h3>
<p class="user-card__info">緑</p>
<div class="user-card__name">
<p>あお</p>
<p>あお<span>あお</span>あお</p>
</div>

投稿2025/01/30 14:25

hiroki-o

総合スコア1255

takami3

2025/01/30 23:43

ご回答いただきありがとうございます私の拙い説明で申し訳ございません。おっしゃる通り各ページに共通反映され干渉しあうためエディターの表示していない部分が影響しています。頁を作成する場合、HTMLタグやCSSが他のHTMLタグやCSSから影響を受けないよう記述しなければなりません。全てに対してクラスを定義する必要はない。別途CSS定義が必要なタグにのみクラスを定義する必要がありますページ自体とその他のヘッターやフッター等と干渉しあうものがあるので、HTML記述の際にタグに「class」や「id」を定義する必要があるということです「*・body div・p span・div p span・見出しタグ」等直接指定できません例えば、body {}、div{}、p span{}、div p span{}の記述は干渉しますまた、下記のように記述しても干渉します <h2 class="sample">テキスト</h2> <div class="sample"> <h2>HTMLテキスト</h2> <p>HTMLテキスト</p> ご回答いただいた方法また、ご回答いただいた全て別のクラス名にしても特定のものが干渉する状況です干渉を受けずにそのページにのみ影響を与える記述の方法がないかご質問です h2に関しては「!important;」を使用することで適用させることはできました何卒宜しくお願い致します

行動規範の内容に同意します

あなたの回答