CSS

CSS「(Cascading Style Sheets) 」は、WEBページ（ホームページ）を（スタイルやレイアウトを）どのように表現するか指定する言語です。
文書の文字、色、大きさを変えたり、コンテンツに余白を設けたり、複数列に分けたり、あるいはアニメーションを加えたりなど様々な装飾機能があります。

基本構文

CSS はルールベースの言語です。WEBページ上の特定の要素かグループに適用するスタイリングのルールを定義します。

                    
h1 {
    color: red;
    font-size: 5em;
}

セレクター

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

区分 セレクター 構文 例
基本セレクター全称セレクター*文書のすべての要素を選択
基本セレクター要素型セレクターelementnameinput はあらゆる <input> 要素を選択
基本セレクタークラスセレクター.classname.index は "index" クラスを持つあらゆる要素を選択
基本セレクターID セレクター#idname#toc は "toc" という ID を持つ要素を選択
基本セレクター属性セレクター[attr] [attr=value] [attr~=value]
[attr|=value] [attr^=value] [attr$=value]
[attr*=value]		[autoplay] は autoplay 属性が（どんな値でも）設定されているすべての要素を選択
グループ化セレクターセレクターリストA, Bdiv, span は <span> と <div> の両要素に一致します
結合子子孫結合子A(空白)Bdiv span は <div> 要素の中にある <span> 要素をすべて選択
結合子子結合子A > Bul > li は <ul> 要素の内側に直接ネストされた <li> 要素をすべて選択
結合子一般兄弟結合子A ~ Bp ~ span は <p> 要素の後にある <span> 要素をすべて選択
結合子隣接兄弟結合子A + Bh2 + p は <h2> 要素の後にすぐに続く <p> 要素をすべて選択
結合子列結合子A || Bcol || td は <col> 要素のスコープに所属するすべての <td> 要素を選択

擬似クラス

セレクターに付加するキーワードで、選択された要素に対して特定の状態を指定します。

セレクター 構文 例
方向性擬似クラス:dir文書の言語によって決定される書字方向に基づいて要素を選択
方向性擬似クラス:lang内容物の言語に基づいて要素を選択
位置擬似クラス:any-link要素が :link または :visited のいずれかに一致する場合
位置擬似クラス:linkまだ訪問していないリンクに一致
位置擬似クラス:visited訪問したことのあるリンクに一致
位置擬似クラス:local-link (en-US)絶対 URL が対象 URL と同じリンク、例えば同じページへのアンカーリンクである場合に一致
位置擬似クラス:target文書の URL の対象である要素に一致
位置擬似クラス:target-within (en-US)文書の URL の対象である要素だけでなく、文書 URL の対象である子孫を持つ要素にも一致
位置擬似クラス:scopeセレクターを照合するための参照点となる要素
ユーザー操作擬似クラス:hoverポインティングデバイスでアイテムを指した場合に一致する
ユーザー操作擬似クラス:activeユーザーによってアクティブになっているときに一致
ユーザー操作擬似クラス:focus要素にフォーカスがあるときに一致