【小記】cssの擬似クラスと擬似要素

擬似クラスは、特定のセレクタに特殊な効果を追加するために使用されます.
特定のセレクタに特殊な効果を追加するには、擬似要素を使用します.
 
css 3に規定されている:
擬似クラス書き方:単一コロン+擬似クラス
擬似要素の書き方:二重コロン+擬似要素
css 2に規定されている:
擬似クラス、擬似要素はすべて単一のコロンを使用します
(互換性のため、単コロン表記を推奨)

偽類種

:active     :focus     :hover    :link     :visited    
:first-child(最初のサブエレメント):last-child(最後のサブエレメント)

.demo li.last {background: green; border: 2px dotted blue;}

:nth-child(3)(ある要素の下の3番目のサブ要素)

.demo li:nth-child(n) {background: lime;} 

:nth-child(2 n)は、nth-child(even)(偶数順序のサブエレメント):nth-child(2 n+1)(奇数)に等しい

.demo li:nth-child(-n+5) {background: lime;}

:nth-last-child()(最後の要素から計算し、特定の要素を選択)

.demo li:nth-child(4n+1) {background: lime;}

:nth-of-type()(選択する要素のクラス)

.demo p:nth-of-type(even) {background-color: lime;}

 

擬似元素種

:first-letter(頭文字):first-line(頭行):before:after

.box:after{

        content: "after";

        position: absolute;

        top: -2px;

        left: 200px;

        width: 18px;

        height: 20px;

        background: url("img.png");

        background-size: 100%;

    }