-
疑似クラスとは、要素や属性などの文書構造だけでは特定できない「状況」を対象としてスタイルを適用するセレクタのことです。 例えば、ユーザーがカーソルを合わせた時やクリックしたときに、対象の色を変えたりするなど、特定のスタイルを適用することができます。 ユーザー操作による状況変化に対してスタイルを適用できるため、Webページに動的な効果を与えることが可能です。
擬似要素とは、要素や属性などの文書構造だけでは特定できない「特定箇所」を対象としてスタイルを適用するセレクタのことです。 例えば、ブロックレベル要素の1行目や1文字目に限定してスタイルを指定したり、要素の前後にテキストや画像を挿入することが出来ます。
-
セレクタの種類 セレクタの書式 スタイルを適用する対象 CSSファイル記述例 要素型セレクタ 要素名 要素名で指定した要素 p {color:red;} 全称セレクタ * すべての要素 * {color:red;} classセレクタ 要素名.クラス名 クラス名を付けた要素 p.sample {color:red;} idセレクタ 要素名#id名 id名を付けた要素 div#sample {color:red;} 擬似クラス 要素名:link 未訪問のリンク a:link {color:red;} 要素名:visited 訪問済のリンク a:visited {color:red;} 要素名:hover カーソルが乗っている要素 a:hover {color:red;} 要素名:active クリック中の要素 a:active {color:red;} 要素名:focus フォーカスされている要素 input:focus {background:red;} 要素名:lang 特定の言語を指定した要素 p:lang(en) {color:red;} 要素名:first-child 要素内の最初の子要素 p:first-child {color:red;} 擬似要素 要素名:first-line 要素の最初の一行 p:first-line {color:red;} 要素名:first-letter 要素の最初の一文字 p:first-letter {color:red;} 要素名:before 要素の直前 blockquote:before {content:"『";} 要素名:after 要素の直後 blockquote:after {content:"』";} 属性セレクタ 要素名[属性名] 特定の属性を持つ指定要素 a[target] {color:red;} 要素名[属性名= "属性値"] 特定の属性値を持つ指定要素 a[target="_blank"] {color:red;} 要素名[属性名~= "属性値"] 属性値候補と一致した要素 p[class~="sample"] {color:red;} 複数のセレクタ セレクタ,セレクタ 複数のセレクタ h1, h2 {color:red;} 子孫セレクタ セレクタ セレクタ 下の階層の子孫要素 p span {color:red;} 子セレクタ セレクタ>セレクタ 直下の階層の子要素 p > span {color:red;} 隣接セレクタ セレクタ+セレクタ 直後に隣接している要素 h1 + p {color:red;}
