WebプログラミングならR-izm

サイトマップ 最初に

CSSの文法

文法は以下の通りです。
セレクタ{CSSプロパティ名:値;}

セレクタ

セレクタはスタイルを適用する対象を指定します。
セレクタは複数あり、一覧を以下に記載します。

セレクタ一覧
セレクタ意味セレクタの種類
*すべての要素を対象にします。ユニバーサルセレクタ
EE要素に対して適用します。タイプセレクタ
E[foo]foo属性を持つE要素に対して適用します。属性セレクタ
E[foo="bar"]barという値のfoo属性を持つE要素に対して適用します。属性セレクタ
E[foo~="bar"]barという値を1つでも含んでいたらfoo属性を持つE要素に対して適用します。属性セレクタ
E[foo^="bar"]barという値から始まるfoo属性を持つE要素に対して適用します。属性セレクタ
E[foo$="bar"]barという値で終わるfoo属性を持つE要素に対して適用します。属性セレクタ
E[foo*="bar"]barという文字列を含むfoo属性を持つE要素に対して適用します。属性セレクタ
E[hreflang|="jp"]jp値のhreflang属性をもつE要素に対して適用します。属性セレクタ
E:rootドキュメント内のルート要素であるEという要素に適用します。擬似クラス
E:nth-child(n)親要素のn番目の子要素であるE要素に適用します。擬似クラス
E:nth-last-child(n)親要素の最後から数えてn番目の子要素であるE要素に適用します。擬似クラス
E:nth-of-type(n)兄弟関係にありn番目のE要素に適用します。擬似クラス
E:nth-last-of-type(n)兄弟関係にあり最後から数えてn番目のE要素に適用します。擬似クラス
E:first-child親要素の最初の子要素であるE要素に適用します。擬似クラス
E:last-child親要素の最後の子要素である適用します。擬似クラス
E:first-of-type兄弟関係にある最初のE要素に適用します。擬似クラス
E:last-of-type兄弟関係にある最後のE要素に適用します。擬似クラス
E:only-child親要素の唯一の(兄弟関係を持たない)子要素であるE要素に適用します。擬似クラス
E:only-of-type兄弟関係にあるE要素に適用します。擬似クラス
E:emptyテキストノードも含めて子要素を持たないE要素に適用します。擬似クラス
E:link未訪問のハイパーリンクのソースのアンカーであるE要素に適用します。リンク擬似クラス
E:visited訪問済みハイパーリンクのソースのアンカーであるE要素に適用します。リンク擬似クラス
E:activeクリックなどでアクティブになったE要素に適用します。ダイナミック擬似クラス
E:hoverマウスポインタで指し示されたE要素に適用します。ダイナミック擬似クラス
E:focusタブキーなどでフォーカスされているときのE要素に適用します。ダイナミック擬似クラス
E:target参照URIの目標であるE要素に適用します。ターゲット擬似クラス
E:lang(fr)前方一致でfrというlang属性値を持つE要素に適用します。言語擬似クラス
E:enabled有効な(:enabled)E要素に適用します。UI要素状態擬似クラス
E:disabled無効な(:disabled)E要素に適用します。UI要素状態擬似クラス
E:checkedラジオボタンあるいはチェックボックスがチェックされた状態のときにE要素に適用します。UI要素状態擬似クラス
E::first-lineE要素の最初の1行に適用します。擬似要素
E::first-letterE要素の最初の1文字に適用します。擬似要素
E::selectionユーザが選択したE要素の一部に適用します。擬似要素
E::beforeE要素の内容の前に適用します。擬似要素
E::afterE要素の内容の後に適用します。擬似要素
E.warningwarningというクラス名を持つE要素に適用します。クラスセレクタ
E#myidmyidというID名を持つE要素に適用します。IDセレクタ
E:not(s)sでないセレクタを持つE要素に適用します。否定擬似クラス
EFE要素と孫子関係にあるF要素に適用します。子孫セレクタ
E>FE要素と直接の子関係にあるF要素に適用します。子セレクタ
E+FE要素と弟関係にあるF要素に適用します。隣接セレクタ
E~FE要素が前にあるF要素に適用します。間接セレクタ

CSSプロパティ

CSSプロパティは名には文字の色やサイズなどの装飾やマージンなど幅や高さに関わる内容を記載します。
ブラウザ毎に異なりますが、CSSプロパティにはデフォルトの値が設定されています。
CSSの設定を行うことで、指定したCSSプロパティを新しい値に更新できます。

CSSの実践に行く

CSSの書方に戻る