CSS Lesson Work

 

セレクタ一覧表      
名前 セレクタの書式 スタイルを適用する対象 使用例
要素型セレクタ 要素名 要素名で指定した要素 p {color:blue;}
全称セレクタ * すべての要素 * {color:blue;}
classセレクタ 要素名.クラス名 クラス名を付けた要素 p.sample {color:blue;}
idセレクタ 要素名#id名 id名を付けた要素 div#sapmle {color:blue;}
擬似クラス

要素名:link

要素名:visited

要素名:hover

要素名:active

要素名:focus

要素名:lang

要素名:first-child

未訪問のリンク

訪問済のリンク

カーソルが乗っている要素

クリック中の要素

フォーカスされている要素

特定の言語を指定した要素

要素内の最初の子要素

a:link {color:blue;}

a:visited {color:blue;}

a:hover {color:blue;}

a:active {color:blue;}

input:focus {background:blue;}

p:lang(en) {color:blue;}

p:first-child {color:blue;}
擬似要素 要素名:first-line 要素の最初の一行 p:first-line {color:blue;}
要素名:first-letter 要素の最初の一文字 p:first-letter {color:blue;}
要素名:before 要素の直前 blockquote:before {content:””;}
要素名:after 要素の直後 blockquote:after {content:””;}
属性セレクタ 要素名[属性名] 特定の属性を持つ指定要素 a[target] {color:blue;}
要素名[属性名= “属性値”] 特定の属性値を持つ指定要素 a[target=”_blank”] {color:blue;}
要素名[属性名~= “属性値”] 属性値候補と一致した要素 p[class~=”sample”] {color:blue;}
複数のセレクタ セレクタ,セレクタ 複数のセレクタ h1, h2 {color:blue;}
子孫セレクタ セレクタ セレクタ 下の階層の子孫要素 p strong {color:blue;}
子セレクタ セレクタ>セレクタ 1直下の階層の子要素 p > strong {color:blue;}
隣接セレクタ セレクタ+セレクタ 直後に隣接している要素 h1 + p {color:blue;}
メルマガにご登録後に実践動画をお送りいたします。