CSSの疑似要素・疑似クラスの種類と使い方【初心者にもわかりやすく解説】

HTML

<div id="sample_ba" class="sample">見出しサンプル</div>

CSS

#sample_ba:before{/*テキストを表示する*/
    content:"疑似要素です。";
    color:#d40000;
    text-decoration:underline;
}
#sample_ba:after{/*画像を表示する*/
    content:url(icon_star.png);
}

HTML

<div id="sample_ba2" class="sample">見出しサンプル2</div>

CSS

#sample_ba2:before{
    content:"";/*空にして記述する*/
    width:30px;
    height:30px;
    background:#d40000;
    display:block;/*ブロック要素に変更*/
}

HTML

<div id="sample_ba3" class="sample">見出しサンプル3</div>

CSS

#sample_ba3{
    padding-left:50px;
    position:relative;
}
#sample_ba3:before{
    content:"";
    width:30px;
    height: 30px;
    border-radius: 50%;
    background:#d40000;
    position: absolute;
    top:15px;
    left:15px;
}
#sample_ba3:after{
    content:"";
    width:30px;
    height:30px;
    border-radius: 50%;
    background: #0000d4;
    position:absolute;/*配置を変更*/
    top:5px;
    left:5px;
}

HTML

<div id="sample_fl" class="sample">見出しサンプル</div>

CSS

.sample{
    font-size: 20px;
    font-weight:400;
}
#sample_fl:first-letter{
    font-size: 2rem;
    font-weight:bold;
    color:#d40000;
}

HTML

<div id="sample_fline" class="sample">ダミーテキストダミーテキストダミーテキストダミーテキスト<br>ダミーテキストダミーテキスト</div>

CSS

#sample_fline::first-line{
    font-size: 2rem;
    font-weight: bold;
    color:#d40000;
}

HTML

<ul id="sample_list"<
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
</ul>

CSS

ul#sample_list{
    padding-left:30px;
    list-style:decimal;
}
ul#sample_list li{
    line-height:2.5;
    font-size:16px;
}
ul#sample_list li::marker{
    color: #d40000;
    font-size:1.5rem;
    font-weight: bold;
}

HTML

<div id="sample_h" class="sample">カーソルを重ねてください</div>

CSS

#sample_h:hover{
    color: #d40000;
}

HTML

<div class="sample_btn">ボタン</div>
<div id="sample_h2" class="sample">ボタンにカーソルを重ねてください</div>

CSS

.sample_btn{
    max-width: 200px;
    padding:5px;
    background: #d9d9d9;
    border:solid 3px #666;
    border-radius:5px;
}
.sample_btn:hover + #sample_h2{
    color:#d40000;
    font-weight: bold;
}

HTML

<a href="###">ハイパーリンク</a>
<a href="###">ハイパーリンク2</a>

CSS

a:link{
    color:#d40000;
}
a:visited{
    color: #0000d4;
}

HTML

<ul id="sample_list2" class="sample_list">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
    <li>リスト項目6</li>
</ul>

CSS

/*nth-child*/
#sample_list2 li:nth-child(4){/*4番目のliだけ*/
    color:#d40000;
    font-weight:bold;
}

HTML

<table id="sample_tbl1" class="sample_tbl">
    <tr><td>テーブル項目1</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目2</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目3</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目4</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目5</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
    <tr><td>テーブル項目6</td><td>ダミーテキストダミーテキストダミーテキスト</td></tr>
</table>

CSS

#sample_tbl1 tr:nth-child(odd) td{/*奇数番目のみ*/
    background: #666;
    color:#fff;
}
#sample_tbl1 tr:nth-child(even) td{/*偶数番目のみ*/
    background: #333;
    color: #fff;
}

HTML

<ul id="sample_list3" class="sample_list">
    <li>リスト項目1</li>
    <li>リスト項目2</li>
    <li>リスト項目3</li>
    <li>リスト項目4</li>
    <li>リスト項目5</li>
    <li>リスト項目6</li>
</ul>

CSS

/*first-child*/
#sample_list3 li:first-child{/*最初のliだけ*/
    color: #d40000;
    font-weight: bold;
}
/*last-child*/
#sample_list3 li:last-child{/*最後のliだけ*/
    color: #0000d4;
    font-weight: bold;
}

HTML

<div id="sample_1" class="sample_n">ダミーテキスト1</div>
<div id="sample_2" class="sample_n">ダミーテキスト2</div>
<div id="sample_3" class="sample_n">ダミーテキスト3</div>
<div id="sample_4" class="sample_n">ダミーテキスト4</div>
<div id="sample_5" class="sample_n">ダミーテキスト5</div>

CSS

.sample_n:not(#sample_3){/*#sample_3以外の.sample_nクラス*/
    color:#d40000;
    font-weight: bold;
}

HTML

<div id="sample_btn2">ボタン</div>
<div id="sample_double">ボタンにカーソルを重ねてください</div>

CSS

#sample_btn2{
    width:100%;
    max-width: 200px;
    background: #333;
    border:solid 3px #666;
    border-radius: 5px;
    color:#fff;
    text-align: center;
    font-weight: bold;
    padding: 5px;
    margin: 10px;
}
#sample_double{
    padding:5px;
    text-decoration: underline;
}
#sample_btn2:hover + #sample_double:before{
    content:url(icon_star.png);
}