CSSの小ネタです。最近その存在を知ったのですが、CSSの擬似クラス:not()
ってのが素敵すぎでしょう!と感動したのでご紹介。
CSSの基本はこちら
※参考:【CSSの基本】書ける前に読む!HTML、CSS、JSの書式-3 - クモのようにコツコツと
一部の要素に余計なものが…
例えばこんなリストがあるとする。 コーポレートサイトのグローバルメニューみたいな。
<nav> <ul > <li><a href="hoge">ホーム</a></li> <li><a href="hoge">ニュース</a></li> <li><a href="hoge">会社概要</a></li> <li><a href="hoge">商品紹介</a></li> <li><a href="hoge">採用情報</a></li> <li><a href="hoge">お問い合わせ</a></li> </ul> </nav>
そんでもって、このメニューは右よせで横並びしているとする。
メニューとメニューの間には「 | 」で区切りたい。
nav li::before { content: " | "; }
擬似要素::before
をつけると「li
要素の前(左側)に擬似要素(content
)の文字列|
を追加する」という意味になります。
でもこのままだと一番先頭の「ホーム」の前にも|
が入ってしまう。先頭だけはこれはいらんわな。
「○番目」系の擬似クラス
これまでは:nth-child(1)
や:first-child
などの擬似クラスで擬似要素(content
)を消す設定を上書きする必要があった。
nav li::before { content: " | "; } nav li:nth-child(1)::before { content: none; }
下に追記したのは「1番目のli
要素の前の擬似要素content
をnone
にする」という意味になります。
ちなみに擬似クラスと擬似要素を二重で指定する時は「擬似クラス→擬似要素」の順番になります。
:not()を使うとシンプル!!
ところが!なんということでしょう。
擬似クラス:not()
を使うとこの二重指定が不要になるのです!!
nav li:not(:first-child)::before { content: " | "; }
:not()
は「カッコの中以外」という意味になり、「一番目以外のli
要素の前に擬似要素content
の文字列|
を追加する」という意味になります。
最後に
擬似クラス:not()
を使うと、工夫次第でこれまで二重に指定していた値を削減できそうです。
例えば表の一番最最初の行だけ線がいらないよ、とか、段落の一番最後だけ余白がいらないよ、とか。
積極的に使っていきたいと思います!
※参考:ネイティブHTML & CSSやってみたシリーズ
qiita.com