覚えてられないCSSに関するメモ#1

link要素でCSSファイルを読み込む

<link rel="stylesheet" type="text/css" href="css/styles.css" />

importでCSSファイルを読み込む

<style type="text/css">
@import "css/style.css";
</style>

CSSファイルの1行目に以下を記述することでCSSの文字コードを指定

@charset "UTF-8";

1行目じゃなきゃだめ

名前	セレクタ	意味	例
ユニバーサル	*	全ての要素	* {color: #000000;}
タイプ	E	その要素	p {color: #000000;}
子孫	E F	親Eに含まれる子孫要素F	p em {color: #000000;}
子	E > F	親Eに含まれる直接の子F	p > em {color: #000000;}
隣接	E + F	兄Eの直後の弟F	h1 + p {color: #000000;}
クラス	.classname	class属性が指定名の要素	.note {color: #000000;}
ID	#idname	id属性値が指定名の要素	#header {color: #000000;}
属性	E[attr]	要素Eが属性attrを持つ場合	input[type] {padding: 2px;}
属性	E[attr="value"]	要素Eが属性attrと値valueを持つ場合	input[type="text"] {padding: 2px;}
属性	E[attr~="value"]	要素Eが属性attrを持ち、空白区切りで指定された属性値にvalueが含まれている場合	p[class~="moveto"] {color: #000000;}
属性	E[attr\|="value"]	要素Eが属性attrを持ち、ハイフン区切りで指定された属性値にvalueが前方一致で含まれている場合	p[class\|="moveto"] {color: #000000;}

一般的なスタイルより個別的なスタイルが優先される
詳細度が同じスタイルについては、あとから読み込んだスタイルが適用される
IDセレクタ＞クラス/属性セレクタ＞タイプセレクタ＞ユニバーサルセレクタ

名前	セレクタ	意味	例
リンク疑似クラス	:link	未訪問リンク	a:link {color: #000000;}
リンク疑似クラス	:visited	未訪問リンク	a:visited {color: #000000;}
ダイナミック疑似クラス	:hover	カーソルオン	a:hover {color: #000000;}
ダイナミック疑似クラス	:focus	フォーカス	a:focus {color: #000000;}
ダイナミック疑似クラス	:active	アクティブ	a:active {color: #000000;}
言語疑似クラス	:lang()	要素に指定言語コードが指定されている場合	div:lang(en) {font-size: small;}
:first-child疑似クラス	:first-child	要素中の最初の子要素	div:first-child {font-size: small;}
:first-line疑似要素	:first-line	要素の1行目のみ	div:first-line {font-size: small;}
:first-letter疑似要素	:first-letter	要素の1文字目のみ	div:first-letter {font-size: small;}
:before疑似要素	:before	要素の直前に内容を生成	#main:before {content: "from";}
:after疑似要素	:after	要素の直後に内容を生成	#main:after {content: "to";}