[CSS] Grammer

基本

MDN Web Docs

CSS の基本

HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。

• セレクタ (selector)
• 宣言 (declaration)
• プロパティ (property)
• プロパティ値 (property value)

セミコロン区切り

ボックス

MDN Web Docs

CSS の基本

HTML のように、CSS は本当のプログラミング言語ではありません。またマークアップ言語でもありません。CSS はスタイルシート言語です。CSS は、HTML の要素を選択的にスタイルにするために使うものです。例えば、この CSS は段落のテキストを選択し、色を赤に設定しています。

パディング構文

属性値の数	意味	覚え方
1	padding 上下左右
2	padding 上下 左右	上下左右
3	padding 上 左右 下	ゲームコントローラを上から..
4	padding 上 右 下 左	時計の針が回る方向

padding

セレクタ

MDN Web Docs

CSS セレクター

CSS セレクターは、一連の CSS の規則が適用される要素を定義します。

基本

名前	表現	対象
要素	div	<div>
id	#id	ID=idの要素
クラス	.className	classNameクラスの要素
クラス(複数)	.className1.className2	className1とclassName2の両クラスを持つ要素
属性	a[href="http:.."]	<a href="http:...">`

結合子

名前	表現	意味
子	a > b	aの直下にあるb
子孫	a b	aの配下にあるb
隣接	a + b	aに隣接しているb
後方	a ~ b	aの後方にあるb

疑似クラス

名前	表現	意味
アクティブ	button:active	<button>が押されている時
無効	input:disabled	<input>が無効な状態
フォーカス	input:focus	<input>がフォーカスを持っている
ホバー	a:hover	<a>にポインタがあたっている
訪問済み	a:visited	<a>の先が訪問済み

属性セレクタ

名前	表現	意味
属性有無	a[title]	title属性を持つaタグ
属性値指定	a[title="ほげ"]	title属性がほげのaタグ
属性値開始指定	a[title^="ほげ"]	title属性がほげではじまるaタグ
属性値終了指定	a[title$="ほげ"]	title属性がほげでおわるaタグ
属性値部分指定	a[title*="ほげ"]	title属性にほげを含むaタグ

セレクタの優先順位

アライドアーキテクツのクリエイターブログ

!importantはもう使わない！CSSの優先順位をおさらいしよう

先日の台風で梅雨が明けた気分になっていましたが、全然そんなことなかったです。 こんにちは、フロントエンドエンジニアのあつこです。 HTMLとCSSでお仕事をするようになって暫く経つのですが 未だにスタ

よく使うものを優先度高い順

1. style: 直接書く
2. #id: IDセレクタ
3. .class: クラスセレクタ
4. div: タイプセレクタ

UIはクラスセレクタで判別させることが多い。その場合は親階層から具体的に指定されている方が強い。

論理演算子

Qiita

CSSのセレクタと論理演算 - Qiita

暇つぶしに考えてたらちょっと面白かったので書いてみた OR (A または B) A, B {} AND (A かつ B) AB {} NOT (A ではない) :not(A) {} NOR (「...

定義	記法
aaクラス または bbクラス	.aa, .bb { }
aaクラス かつ bbクラス	.aa.bb { }
aaクラスではない	:not(aa) { }
(aaクラス かつ bbクラス) 以外	:not(.aa.bb) {}