Q&A
回答はしていますが、後だしがひどすぎるので本件には今後一切関わりません。
サイトの大部分を決めるcss(例えばbodyなど)にcssがかかっていて基本的にはその通りしたいが、一部分だけそのcssの影響を受けないようにする、みたいな方法はありますか？
例えば以下のようにすると、基本的に全てのfontが100pxになってしまいますが、どうにかしてp.title-subだけはその影響を受けないようにしたいです。
html
1<body> 2 <h1 class="h1-main">h1-main</h1> 3 <p class="title-main">title-main</p> 4 <div class="exception"> 5 <p class="title-sub">title-sub</p> 6 <div> 7</body>
css
1body{ 2 font-size: 100px; 3}
しかもできれば、p.title-subだけには違うcssだけを当てたく、上記の例でいうと、「div.exception内にあるタグは全て特定の別のcssを優先的に割り当てる」というようなことは可能でしょうか？
ーーーーーーーーーーーーー追記ーーーーーーーーーーーーー
みなさん回答ありがとうございます。
今回やりたいことは、
「sample1.html,sample1.css」と「sample2.html,sample2.css」を合体するということなんですが、両者とも比較的たくさんコードがあり、「sample1.html,sample1.css」と「sample2.html,sample2.css」をそのまま（後ろにくっつけただけでは）「もともとのsample1.html,sample1.css」と「もともとのsample2.html,sample2.css」の純粋な合体ver、ではなく、「sample1.html,sample1.css」のcssのいくつかの点が「sample2.html,sample2.css」に影響を与えてしまっている、という状況のコードが出来上がってしまいます。
これを簡単に解決し、「もともとのsample1.html,sample1.css」と「もともとのsample2.html,sample2.css」の純粋な合体ver、を作りたいのですが可能でしょうか？
（sample2.htmlはsample2.cssの内容だけを参照し、,sample1.cssの内容は一切参照しないということ）
もちろん、そのために全てのcssを書き換えるということで解消するのですが、もっと簡単な方法はないのかと思いまして。。。
わかりにくくてすみません。
回答5件
0
CSSは!importantが宣言されていない限り、基本的には後勝ちなので、「別の指定」を「後」に書けば良いです。
クラスを指定しているのでできればタグまでつけて親子関係も含めて指定したいですね。
css
1body{ 2 font-size: 100px; 3} 4div.exception p.title-sub{ 5 font-size: 20px; 6}
投稿2019/05/10 13:15
編集2019/05/10 13:20総合スコア80850
0
ベストアンサー
とにかく簡単に、ということであれば
- sample1.htmlとsample2.htmlをiframeタグで描画する
- それぞれのcssのクラス名にプリフィックスやサフィックスをつけて、全部違うセレクタにしてしまう(セレクタがclassだけであればですが)
などでしょうか。
バッティングしないように、cssのクラス名の付け方などの設計を見直すのがより良いとは思います。
投稿2019/05/10 16:06
総合スコア2727
0
CSSのスコープ
CSSはCSSを宣言したのと同じDOMツリー上の全ての要素に影響します。
従って、ご質問の例であれば、通常はセレクタを2つ作成して、適用範囲を分割します。
CSS
1:not(p.title-sub) { 2 font-size: 100px; 3} 4 5p.title-sub { 6 font-size: 200px; 7}
shadow DOM
shadow DOMは、DOMツリー上から隠れたDOMですので、CSSの適用範囲外となります。
- 4.8. ShadowRoot インタフェース - DOM Standard 日本語訳
- 4.8. Interface ShadowRoot - DOM Standard
- shadow DOM の使い方 - Web Components | MDN
- Shadow DOM v1: 自己完結型ウェブ コンポーネント | Web | Google Developers
HTML
1<!DOCTYPE html> 2<title>shadow DOM</title> 3<style> 4body { 5 font-size: 20px; 6} 7 8p { 9 color: red; 10 font-weight: bold; 11} 12</style> 13<p>normal content 1</p> 14<div id="exception"></div> 15<p>normal content 2</p> 16 17 18<template id="shadow-template"><style> 19* { 20 font-size: initial; 21} 22</style> 23<p>shadow content</p></template> 24<script> 25'use strict'; 26const shadowContents = document.importNode(document.getElementById('shadow-template').content, true); 27const shadowRoot = document.getElementById('exception').attachShadow({mode: 'closed'}); 28 29shadowRoot.appendChild(shadowContents); 30</script>
Google Chrome 74.0.3729.131 はshadow DOMに継承プロパティを継承してしまうらしく、継承プロパティを initial で初期値に戻しています。
Firefox 66.0.5にはこの問題はありません。
Google Chrome 74.0.3729.131 には、リセットCSSの要領で、継承プロパティを initial で初期化し直す対策をとれば、問題を回避できるでしょう。
少々強引ですが、全てをshadow DOMにしてスタイルを分割する方法もあります。
Re: renren643 さん
投稿2019/05/11 08:16
編集2019/05/11 08:26
総合スコア18162
0
こういうことでしょうか？
css
1div.exception *{ 2 font-size:16px; /* サイズを指定したい場合 */ 3 font-size:initial; /* デフォルトに戻したい場合 */ 4}
質問の変更を受けて追記
HTML
1<div id="sample1"> 2ここにsample1.htmlの部分 3</div> 4<div id="sample2"> 5ここにsample2.htmlの部分 6</div>
scss
1#sample1{ 2ここにsample1.css 3} 4#sample2{ 5ここにsample2.css 6}
とすれば、そこそこ上手くいくんじゃないかな、などと思うのですが……
投稿2019/05/10 13:15
編集2019/05/11 05:55
総合スコア36089
ちなみにinitialはIE11で使用できないので
PCサイトの場合は注意が必要です。
https://developer.mozilla.org/ja/docs/Web/CSS/initial
回答ありがとうございます。
確かにサイズだけならそれで解消すると思うのですが、、、
質問を追記したので、そちらも見ていただけると大変ありがたいです。。。
追記は最初に記載するべきでしたね。
SCSSやnpmを使用すれば可能です。
> 純粋な合体ver、を作りたいのですが可能でしょうか？
0
基本的に、ブラウザそのものがデフォルトスタイルを持っていますので、影響を全く受けないようには出来ません。そのためにリセットCSSが存在します。
また、そのページ内において、例えば、body以外の影響を受けたくなければ、body以下の要素と同階層（兄弟要素）に置けば、body以外のCSSは継承されません。
投稿2019/05/11 02:22
総合スコア3523
あなたの回答
tips
プレビュー
