・「!important」 - 指定すると最優先になるキーワード
・「要素名#ID名」 - 要素名とID名で指定
・「#ID名」 - ID名で指定
・「要素名#クラス名」 - 要素名とクラス名で指定
・「#クラス名」 - クラス名で指定
・「要素名」 - 記述した要素名（タイプセレクタ）のみ指定
・「*（アスタリスク）」 - 全称セレクタ（全ての要素を指定）

・「!important」を付けるとどのような指定方法でも「最優先」とされる。
・優先順位が同じになった場合は、最後に指定したスタイルが適用される。

「Javascript」で動的に、クラス名などを追加・削除をする場合は、
追加するクラス名のCSS記述位置を後にすることで、上書きもできる。

指定方法	セレクター名	点数
style=""	HTML要素への直書き	1000
#ID名	「id」セレクタ	100
.クラス名	「class」セレクタ	10
要素属性（例：「type="text"」）	擬似クラス	10
要素名:first-child	擬似要素	1
要素名（例：div）	タイプセレクタ	1
*（アスタリスク）	全称セレクタ	0

Back

要素(HTMLタグ）での指定

「CSS」を要素(HTMLタグ）で指定して適用するには、

body { color: #333333; }
h1 { background-color: #FF0000; }
div { color: #333333; }
h1, h2 { background-color: #FF0000; }
div, p { color: #333333; }

などのように、
「HTML」で使われる「タグ名」を記述してCSSスタイルを指定する。
「,」で区切ることで、複数指定することも可能。

Back

「*」 - すべての要素を指定

「*（アスタリスク）」は、
全ての要素を指定することができる便利な記号。

* { color: #333333; }
body * { background-color: #FF0000; }
h1 > * { color: #333333; }
div > * { background-color: #FF0000; }
h1, h2 > * { color: #333333; }
div, p > * { background-color: #FF0000; }

などのように、全ての要素として指定することも可能ですが、
ある要素以下の全ての要素を指定することも可能。

Back

「.class」 - クラス名での指定

「.クラス名」と指定することで、
「HTML」タグのクラス属性に指定した名前で、
CSSスタイルを適用することができる。
「クラス名」は、複数のHTMLタグに指定することができるので、
同じCSSスタイルを複数のHTMLタグに指定するときに便利。

.クラス名 { color: #333333; }
.クラス名 * { background-color: #FF0000; }
.クラス名 > * { color: #333333; }
.クラス名, .クラス名 > * { background-color: #FF0000; }

Back

「#id」 - ID名での指定

「#ID名」と指定することで、
「HTML」タグのID属性にしたID名で、
CSSスタイルを適用する対象を指定することができる。

#ID名 { color: #333333; }
#ID名 * { background-color: #FF0000; }
#ID名 > * { color: #333333; }
#ID名, #ID名 > * { background-color: #FF0000; }

「ID名」は、「HTML」ファイル内に一つのみしか指定できない。
同一「HTML」ファイル内に、複数の同一ID名は指定できないようになっています。

Back

「A > B」 - 子セレクタでの指定

「A > B」と指定することで、
「HTML」タグの子要素を指定して、
CSSスタイルを適用することができる。

子要素は、
親要素のすぐ下にある要素のことで、
子要素の子要素は、孫要素となるので、
「A > B」で指定できるのは、「子要素」。

HTMLタグ名 > #ID名 { color: #333333; }
#ID名 > HTMLタグ名 { background-color: #FF0000; }
#クラス名 > HTMLタグ名 { color: #333333; }
#ID名 > * { background-color: #FF0000; }
#ID名 > * { color: #333333; }
#ID名, #ID名 > * { background-color: #FF0000; }
#ID名 > *, #ID名 > * { color: #333333; }

Back

「A B」 - 半角区切りで子孫セレクタを指定

「A B」のように、
「半角スペース」で区切って指定すると、
子孫セレクタ全てを指定できる。
「A」は親要素指定で、
「B」は、「A」の親要素に含まれる
「子要素」「子孫要素」の中で、
合致する全てを指定した事になる。

「子要素」は、親要素の直下の要素のこと。
「子孫要素」は、親要素内にある全ての要素のこと。

HTMLタグ名 #ID名 { background-color: #FF0000; }
#ID名 HTMLタグ名 { color: #333333; }
#クラス名 HTMLタグ名 { background-color: #FF0000; }
#ID名 * { color: #333333; }
#ID名, #ID名 * { background-color: #FF0000; }
#ID名 .クラス名, #ID名 HTMLタグ { color: #333333; }

Back

「AB」 - 複数条件が一致するセレクターを指定

「AB」のように、
空白など「区切り文字」を付けずに、
連続して、セレクターを記述することで、
その全てのセレクター条件を内包する要素を指定することができる。

HTMLタグ名#クラス名 { background-color: #FF0000; }
#クラス名HTMLタグ名 { color: #333333; }
.クラス名HTMLタグ名, #クラス名HTMLタグ名 { color: #333333; }

Back

「A + B」 - 隣接セレクタでの指定

「A + B」と指定することで、
隣接する兄弟要素を指定することができる。
「A」要素の直後にある「B」要素を指定することが可能で、
「B」要素は、「A」要素の直後にあり、同じ親要素を持つことが条件。

HTMLタグ名 + #ID名 { background-color: #FF0000; }
#ID名 + HTMLタグ名 { color: #333333; }
#クラス名 + HTMLタグ名 { background-color: #FF0000; }
#ID名 + * { color: #333333; }
#ID名, #ID名 + * { background-color: #FF0000; }
#ID名 + .クラス名, #ID名 + HTMLタグ { color: #333333; }

Back

「A ~ B」 - 要素の後ろにある同じ階層のセレクタでの指定

「A ~ B」と指定することで、
兄弟要素を指定することができる。
「A」要素の直後以降にあり、
同じ親要素を持つ、「B」要素をすべて指定することができる。

HTMLタグ名 ~ #ID名 { background-color: #FF0000; }
#ID名 ~ HTMLタグ名 { color: #333333; }
#クラス名 ~ HTMLタグ名 { background-color: #FF0000; }
#ID名 ~ * { color: #333333; }
#ID名, #ID名 ~ * { background-color: #FF0000; }
#ID名 ~ .クラス名, #ID名 ~ HTMLタグ { color: #333333; }

Back

「A , B」 - 複数のセレクタでの指定

「A , B」と指定することで、
複数の要素を指定することができる。
関連性のない「A」要素と「B」要素を指定することができる記述方法で、
一般的によく使われる指定方法。
「,」で区切ることで、複数の条件を指定することができる。

HTMLタグ名, #ID名 { background-color: #FF0000; }
#ID名, HTMLタグ名 { color: #333333; }
#クラス名, HTMLタグ名 { background-color: #FF0000; }
#ID名, .クラス名 { color: #333333; }
#ID名, #ID名 ~ * { background-color: #FF0000; }
#ID名 ~ .クラス名, #ID名 ~ HTMLタグ { color: #333333; }

Back

「A || B」 - テーブルの列に所属する要素を指定

「A || B」と指定することで、
「A」要素の列に属する「B」要素をしてすることができる。

「テーブル」の縦に並んだ要素を指定することができるので、
テーブルレイアウトの時に便利。

#tr_Title || td { background-color: #FF0000; }
#tr_001 || td { background-color: #00FF00; }
#tr_002 || td { background-color: #0000FF; }
#tr_003 || td { background-color: #888888; }

Back

擬似クラスを使って指定する方法

擬似クラスは、セレクターに加えたキーワードで、
選択された要素の特定の状態を指定することができる。
「:hover 」疑似クラスであれば、
マウスが指定要素の上に位置したときのCSSスタイルを指定することができ、
リンクで使用される「a」タグや、
画像を配置するのに使われる「img」タグで使用されます。

a:hover { background-color: #FF0000; }
img:hover { width: 100%; }

疑似クラスの種類

疑似クラス	説明
:active
:any-link
:blank
:checked
:current
:default
:defined
:dir()
:disabled
:drop
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:future
:focus
:focus-visible
:focus-within
:has()
:host
:host()
:host-context()
:hover
:indeterminate
:in-range
:invalid
:is()
:lang()
:last-child
:last-of-type
:left
:link
:local-link
:not()
:nth-child()
:nth-col()
:nth-last-child()
:nth-last-col()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:past
:placeholder-shown
:read-only
:read-write
:required
:right
:root
:scope
:target
:target-within
:user-invalid
:valid
:visited
:where()

Back

疑似要素を使って指定する方法

「疑似要素」は、
「::疑似要素」と指定することで、
要素の一部を指定することができる要素指定方法。

「::first-line」疑似要素は、
指定した要素内にある文章の１行目にCSSスタイルを適用する「疑似要素」。

p::first-line { color: #FF0000; }

疑似要素の種類

疑似要素	説明
::after (:after)
::backdrop
::before (:before)
::cue
::cue-region
::first-letter (:first-letter)
::first-line (:first-line)
::grammar-error
::marker
::part()
::placeholder
::selection
::slotted()
::spelling-error

Back

【疑似クラス】特定の子要素を指定する方法

「:nth-child(n)」 - 親要素内のn番目の要素の指定

擬似クラス「:nth-child(n)」は、
親要素内のn番目の要素を指定できる。
「n」に指定した要素の番号を記述する事で、指定できる。

書式

HTMLタグ名:nth-child(n){
CSSコードを記述
}

「:nth-of-type(n)」 - 親要素内の同じ種類の要素の中のn番目の要素

疑似クラス「:nth-of-type(n)」を使用すると、
要素内にある指定した順番の要素を指定することができる。
「n」に数字を記述することで、その順番にある要素を指定することが可能。

書式

HTMLタグ名:nth-of-type(n){
CSSコードを記述
}

A:not(B)（B以外の要素の指定）

擬似クラス「:not(HTMLタグ名)」を使用すると、指定した要素内にある指定した要素を除外した他の要素を指定することができる。

書式

HTMLタグ名:not(HTMLタグ名){
CSSコードを記述
}

Back