See the Pen
:hover by linlin (@linlin098765)
on CodePen.
<div>あああああああ</div>div:hover{background-color:red;}CSSの:hoverは、マウスカーソルを要素の上に置いている際に適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
:link,:visited by linlin (@linlin098765)
on CodePen.
<a href="https://www.llc-linlin.com">Linlinのリンク</a>a:link{color:red;}
a:visited{color:green;}CSSの:visited（擬似クラス）は、訪問済リンクにスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
:link,:visited by linlin (@linlin098765)
on CodePen.
<a href="https://www.llc-linlin.com">Linlinのリンク</a>a:link{color:red;}
a:visited{color:green;}CSSの:visited（擬似クラス）は、未訪問リンクにスタイルを適用する擬似クラスです。擬似クラスの適用方法は「要素orクラス名orid名:擬似クラス」です。
See the Pen
idセレクタ by linlin (@linlin098765)
on CodePen.
<div id="sample">ああああ</div>#sample{color:red;} CSSのidセレクタは、id属性によってid名を指定した要素に対してスタイルを適用するセレクタです。id属性によるid名の指定は、同じHTMLファイル内（ホームページの１ページ）で１箇所しか指定できません。
idセレクタのスタイル適用方法は、id名の前に「#（ショープ）」を指定し「#id名{}」でスタイルを適用します。
See the Pen
classセレクタ by linlin (@linlin098765)
on CodePen.
<div class="sample">あああ</div>
<p class-"sample">良いい</p>.sample{color:red;} CSSのclassセレクタは、class属性によりクラス名を指定した要素に対しスタイルを適用するセレクタです。class属性によるクラス名の指定は、同一名で何箇所でも指定可能です。
classセレクタはクラス名の前に「.（ドット）」を指定して「.class名{}」でスタイルが適用可能となります。
See the Pen
全称セレクタ by linlin (@linlin098765)
on CodePen.
<div>ああああ</div>
<p>良い良い</p>*{color:red;}CSSの全称セレクタは、全ての要素にスタイルを適用するセレクタです。「*{}」で全要素をセレクタ可能です。
See the Pen
要素型セレクタ by linlin (@linlin098765)
on CodePen.
<div>あああああああああああ</div>
<p>良い良い良い良い良い良い</p>div{color:red;}
p{color:blue;}CSSの要素型セレクタとは、特定要素に対してスタイルを指定するセレクタを指します。例えばpタグに適用したい場合「p{}」、divタグに適用したい場合「div{}」となります。
See the Pen
page by linlin (@linlin098765)
on CodePen.
<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> @page m50 {margin:50mm;}
@page {size:100mm 100mm;marks:crop cross;}
p.sample1 {page:m50;}CSSのmarksは、印刷時にトンボを印刷するか指定するプロパティです。
※トンボとは、印刷物の裁断位置や多色刷りの見当合わせのために、版下原稿のと上下左右の中央に印刷される位置合わせの目印を言います。
See the Pen
page by linlin (@linlin098765)
on CodePen.
<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> @page m50 {margin:50mm;}
@page {size:100mm 100mm;}
p.sample1 {page:m50;}CSSのsizeは、pageプロパティで定義したページボックスのサイズ・向きを指定するプロパティです。1つの値を指定するとサイズ・向きの両方がその値となり、2つの値を指定するとサイズ・向きをそれぞれ指定可能です。
See the Pen
page by linlin (@linlin098765)
on CodePen.
<p class="sample1">
あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</p>
<p class="sample2">
いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
</p> @page m50 {margin:50mm;}
p.sample1 {page:m50;}CSSのpageは、@pageで定義されたページボックス名を指定し、ページボックスを適用するプロパティです。