Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【css】 セレクター/ どこまで記述すれば良いのか腑に落ちた( ˙◊˙◞ )◞💡

!important の意味を明確に理解していなかったので、一次ソース( W3C ) + MDN*1 で調べてみました。

 その過程で、「上位階層のどこから指定し始めるのが良いのか」も理解できました。

 

はてなブログのテーマ制作過程で疑問に思っていたまま、「スタイルが適用されればまあいっか」のまま、曖昧なままでした。

 

明確に理解でき、疑問が解決しました🌟

 

 

The !important exception

When an important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has nothing to do with specificity, it interacts directly with it. Using !important is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the !important rule are applied to the same element, the declaration with greater specificity will be applied.

 

Some rules of thumb:

●Always look for a way to use specificity before even considering !important

●Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
●Never use !important when you're writing a plugin/mashup.
●Never use !important on site-wide CSS.

 

Instead of using !important, you can:

1. Make better use of CSS cascading properties
2. Use more specific rules. By indicating one or more elements before the element you're selecting the rule becomes more specific and gets higher priority:

<div id="test">

   <span>Text</span>

</div>

 

div#test span { color: green }

div span { color: blue }

span { color: red }

 

No matter what the order, the text will be green because that rule is most specific. (Also, the rule for blue overwrites the rule for red, notwithstanding the order of the rules)

Specificity ---MDN
https://developer.mozilla.org/en/docs/Web/CSS/Specificity

 

 

要約すると、

● 2つ以上スタイル指定がある場合( 外部ソースなど )、!important が付いているセレクターは、他のどのスタイル指定よりも優先される

● ただし、!importantの使用は、デバッグ(修正)の際に非常に複雑・困難になるので使用は極力避ける

●『より詳細に特定している(Specify) セレクターが適用される』規則を上手に活用する事

 

 

 

上記の例 (#test ) は、非常にわかりやすい。

 

 

 

*1:Mozilla Developer Netvwork

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️