今回のポイント
今回は『構造的な擬似クラス』について解説していきます。
『擬似クラス』を使うことで、要素内全体に対してスタイルを適用ことが出来ます。
リストタグを使用して、今回はどのように装飾されるか見ていきましょう。
リストタグに関しては、以下の過去の記事を参考にしてみて下さい。
HTMLの記事を準備する
今回は先程も述べましたが、リストを用いたHTMLの記事を準備してみました。
HTMLファイルの準備方法については、以下の過去の記事を参考にして下さい。
そして以下が準備した記事のHTMLソースです。
<!DOCTYPE HTML>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>ぱくぱくのCSS講座</title>
<link rel=”stylesheet” type=”text/css” href=”style.css”>
</head>
<body>
<ul>
<li>ぱくぱくのHTML</li>
<li>ぱくぱくのCSS</li>
<li>ぱくぱくのテキストエディタ</li>
</ul>
</body>
</html>
CSSファイルを準備する
今度はCSSファイルを準備します。
今回は外部にCSSファイルを作成します。
外部にCSSファイルを作成する方法については以下の過去の記事を参考にして下さい。
そして準備したCSSファイルに、以下の内容を記述しておきましょう。
li {
display: block;
border-top: 1px solid #000;
padding: 10px;
}
そして、今回前もって記述したCSSの内容を解説しておきます。
li { → HTMLファイル内の『li要素』に対してここから装飾を指定
display: block; → ブロックであることを指定
border-top: 1px solid #000; → 各リストの上部に1pxの黒ラインを引く
padding: 10px; → 各リストの間隔を10pxに指定
} → 『li要素』に対する指定内容はここまでと指定
それでは今回準備したHTMLファイルを、ブラウザで確認しておきましょう。
構造的な擬似クラスを記述する
それでは今回の本題です。
『構造的な擬似クラス』を使用して今回準備したHTMLファイルに対して装飾指定していきましょう。
:first-child
一番最初の子要素に対して、装飾を指定する方法を解説します。
親要素と子要素については、以下の過去の記事で解説しています。
この方法には以下のセレクタを使用します。
●:first-child{
＊＊＊＊＊
}
このように『要素 ＋ :』のあとに『first-child』を記述することで、『一番最初の子要素』に対して装飾を指定することが出来ます。
それでは実際にCSSを記述してみましょう。
先程のCSSファイルに、次のように追記します。
li{
display: block;
border-top: 1px solid #000;
padding: 10px;}
li:first-child{
background-color: steelblue;
}
今回は『li要素』の一番最初の要素に対して装飾の指定できました。
そして装飾内容は
background-color: steelblue;
これは『背景色をsteelblue色に指定』という意味です。
それではブラウザで確認してみましょう。
ul要素内の一番最初にある子要素『ぱくぱくのHTML』が装飾されていますね。
:last-child
一番最後の子要素に対して、装飾を指定する方法を解説します。
この方法には以下のセレクタを使用します。
●:last-child{
＊＊＊＊＊
}
このように『要素 ＋ :』のあとに『first-child』を記述することで、『一番最後の子要素』に対して装飾を指定することが出来ます。
それでは実際にCSSを記述してみましょう。
先程のCSSファイルに、次のように追記します。
li {
display: block;
border-top: 1px solid #000;
padding: 10px;
}
li:first-child {
background-color: steelblue;
}
li:last-child {
border-top: none;
}
今回は『li要素』の一番最後の要素に対して装飾の指定できました。
そして装飾内容は
border-top: none;
これは『上線を消す』ことを指定という意味です。
それではブラウザで確認してみましょう。
ul要素内の一番最後にある子要素『ぱくぱくのテキストエディタ』の上線が消えましたね。
次の記事
前回の記事
HTMLを学ぶ。シリーズはこちら
