パンくずリスト（サイト内アドレス表示）で、項目を横に並べるとき、右端の項目には記号（”>”）が要りません。
そのため、右端の項目だけ記号（”>”）を消しますよね。
今回は、隣接セレクタ「+」を使って、それを実現する方法を紹介します。
擬似クラス「:last-child」でパンくずリスト
ボクは今まで、何冊かの HTML と CSS に関する本を見てきました。
その中で、パンくずリストについて記述している箇所をチェックしてみました。
すると、どの本も決まって、擬似クラス「:last-child」を使っています。
それによって、最後の項目の後ろに付く記号（”>” など）を消しているのです。
たとえば、次のようになります。
HTML の例
<ol class="breadcrumb">
<li><a href="../index.html">ホーム</a></li>
<li><a href="index.html">お店情報</a></li>
<li>アクセス</li>
</ol>
CSS の例
.breadcrumb > li {
display: inline;
}
.breadcrumb > li::after {
margin-left: 10px;
content: '>';
}
.breadcrumb > li:last-child::after {
content: '';
}隣接セレクタ「+」でパンくずリスト
パンくずリストも、隣接セレクタ「+」を使えば、記述を省略できます。
たとえば、次のようになります。
CSS の例
liタグの直後にある liタグの前だけに文字 ‘>’ を表示させる。
つまり、liタグと liタグの間にだけ、文字 ‘>’ が入ります。
.breadcrumb > li {
display: inline;
}
.breadcrumb > li + li::before {
margin: 0 5px;
content: '>';
}
利点
記述が単純になります。
隣接セレクタ「+」は、工夫次第でいろんな使い方ができます。
ボクの場合は、たとえばつぎのような感じでも、使っています。
.sidebar section + section {
margin-top: 1em;
}隣接セレクタ「+」は、CSS2 の頃からあるのですが、効果的な使い方を説明している本を、ほとんど見かけません。
いかがですか？ 隣接セレクタ「+」って、ちょっと便利だと思いませんか？
あとがき
ここで紹介した隣接セレクタ「+」は、実は「Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法」という本の中に書いてあったことです。
CSSの設計手法が本題なので、隣接セレクタ「+」の使い方の説明などありません。
隣接セレクタ「+」は、ボクが普段 CSS を記述するときに、よく使っています。
しかし、世に出ている本の中には、効果的な使い方が載っていないようなので、ちょっと紹介してみました。
コメント