More than 5 years have passed since last update.

CSS　簡単に解説(セレクタと詳細度)

Last updated at 2019-06-25Posted at 2019-06-25

CSSとは

カスケーディング・スタイル・シートの略　カスケーディングは翻訳で滝
つまり、後から宣言されたものが継承または上書きすることを意味しています。

親にtext-aligin:centerなんかあったら、親要素を継承します。
子要素にtest-aligin:leftってあったら子要素を優先します。

<div style="text-aligin:center;">
    <div style="text-aligin:left;">//左寄せのほうが適用されます
    </div>
</div>

また、class="abcd efgh" で同じcssの要素(例:text-aligin)を指定していたら、後ろのほう(efgh)が優先されます

セレクタの内容がより具体的・詳細であればあるほど優先されます。
具体的に詳細度が高いのを上に並べてみます。高いほうが優先されます。

・!important 
・インライン記述(style直指定)
・IDセレクタ
・クラスセレクタ　属性セレクタ　疑似クラス
・要素セレクタ　疑似要素
・ユニバーサルセレクタ

.sample-color {
	color: red !important;
}

プロパティの後に記述します。(!important)
基本使ことを避けるべきです。それが崩れるとcssすべてが崩れる的な絶対変えてはいけないものにしか指定しないようにします。

基本避けます。タグにstyle直書きは絶対しないようにします(後でなおすの大変、ちょっとださい)、デバック時とか、一時的な試しのときだけするようにします。

html内で一つだけに指定できます。(個人的にはclassを使いたいです。)

何度も使える
[class="color-sample"]これはclassがcolor-sampleだけのやつです
疑似クラス select:first-child

::after ::beforeなど

* すべての要素に適用するもの

.container .title {
	color: red;//より詳細度が高いこちらが優先される。
}

.title {
	color: green;
}