構造擬似クラスは要素のカウント方法が違うものがあります。 Ardor(@ArdorOnline)です。 以前「CSS3で要素に繰り返しスタイルを適用する方法」で 繰り返しスタイルを適用する方法をご紹介しました。 ご紹介したのは「:nth-child」の使い方でした。 実は他にも繰り返しスタイルを適用する方法が、CSS3から追加されています。
構造擬似クラス
CSS3から追加された構造擬似クラスは、12クラスあります。 その中で繰り返しスタイルを指定するクラスは、10クラスあります。
大きく分けると、すべての要素をカウントしてからスタイルを指定するクラスと、 同じ要素のみをカウントしてスタイルを適用する方法があります。
対応表は次の通りです。
| すべての要素をカウント | 同じ要素のみをカウント |
|---|---|
| :first-child | :first-of-type |
| :last-child | :last-of-type |
| :nth-child | :nth-of-type |
| :nth-last-child | :nth-last-of-type |
| :only-child | :only-of-type |
以前ご紹介したのは、すべての要素をカウントする方法です。
同じ要素をカウントする方法での指定
「:nth-of-type」を指定して同じ要素のみをカウントして指定して見たいと思います。
「:nth-of-type」を利用すると、ページ全体に散らばるh1などに繰り返しスタイルを適用できます。
スタイルの指定は次の通りです。
h6:nth-of-type(odd) {
background-color: greenyellow;
}
h6:nth-of-type(even) {
background-color: yellow;
}
サンプル
h6を並べてみました。
これにスタイルを指定すると次のような表示になります。
1行目
文字列
2行目
文字列
3行目
文字列
4行目
文字列
最後に
すべての要素に適用するか、同じ要素に適用するかで構造擬似クラスを使い分けると便利です。
最後までお読み頂きありがとうございます。
0 件のコメント:
コメントを投稿