リスト《ul・ol・li》とは
リストを作成するために必要なセレクタは以下の通りです。
- ul
- ol
- li
基本的には上記のセレクタの組み合わせでリストを作成していきます。
中点「・」のリストを作りたい方は、
<ul>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ul>番号「1.2.3…」のリストを作りたい方は、
<ol>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
<li>文字</li>
</ol>上記のように記載します。
リストの編集に便利な疑似クラス・疑似要素
リストのコーティング作業を行う上で欠かせないのは疑似クラス・疑似要素です。
そこで、様々なパターンを想定した上で、リストのカスタマイズでよく利用する疑似クラス・疑似要素をサンプルと共に紹介していこうと思います。
:first-child
疑似クラス《:first-child》は、始めの要素にスタイルを適用します。
リストの場合は、一つ目の《li》にスタイルが適用されます。
以下、画像は例です。
以下は画像のソースコードです。
.sample li:first-child{
color:red;
}:last-child
疑似クラス《:last-child》は、最後の要素にスタイルを適用します。
リストの場合は、最後の《li》にスタイルが適用されます。
以下、画像は例です。
以下は画像のソースコードです。
.sample li:last-child {
color:green;
}:nth-child(n)
疑似クラス《:nth-child(n)》は、始めの要素から数えて（ｎ）番目にスタイルを適用します。
ただし、この間に存在する子要素もカウントに含まれます。
例えば、
- （n）の中に「３」を入れると、三番目を指定
- （n）の中に「3n」を入れると、偶数目を指定（子要素を含む）
- （n）の中に「3n-1」を入れると、奇数目を指定（子要素を含む）
以下、画像は例です。
以下は画像のソースコードです。
.sample li:nth-child(3n) {
color:blue;
}:nth-of-type(n)
疑似クラス《:nth-of-type(n)》は、始めの要素から数えて（ｎ）番目にスタイルを適用します。
前項の《:nth-child(n)》とは異なり、この間に存在する子要素をカウントに含みません。
例えば、
- （n）の中に「３」を入れると、三番目を指定
- （n）の中に「3n」を入れると、偶数目を指定
- （n）の中に「3n-1」を入れると、奇数目を指定
以下、画像は例です。
以下は画像のソースコードです。
.sample li:nth-of-type(3n) {
color:red;
}::before
疑似要素《::before》は、要素の直前にスタイルを適用します。
リスト《li》を指定した場合は、各《li》の直前にスタイルが適用されます。
以下は画像のソースコードです。
.sample li{
list-style:none;
}
.sample li::before {
content: "»";
color: red;
}::after
疑似要素《::after》は、要素の直後にスタイルを適用します。
リスト《li》を指定した場合は、各《li》の直後にスタイルが適用されます。
以下は画像のソースコードです。
.sample li{
list-style:none;
}
.sample li::after {
content: "<";
color: green;
}リストのクイズ！基本をマスターしよう！
リストを編集・指定してみよう！
リストを編集する際には部分的なカスタマイズを必要とする場合があります。
例えば、
- 最後のリストだけ下線を引きたくない
- アイコンを何番目に配置したい
等の様々なリストのアイデアを解決に導いてくれるのが「疑似要素」と「疑似クラス」です。
もしも、特殊なカスタマイズをリストに施したいとお考えの方は紹介した方法を用いてカスタマイズを行ってみてはいかがでしょうか。
コメント