cssではじめの子要素以外を指定したい場合、セレクタを分けたりクラス名で識別したりといろいろな方法が考えられますが、一つのセレクタでまとめる方法として:notを用いた方法とそれ以外の方法を紹介します。
下記のようなナビゲーションはよく作成します。この場合、各リンクの間に「｜（パイプ）」を用いて仕切りを入れますが、はじめの要素にはその指示を当てはめないようにしてセレクタを書くと、下記のように二つのセレクタで指示するのが一般的です。
|
1 2 3 4 5 6 7 |
<ul> <li><a href="#">トップ</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">沿革</a></li> <li><a href="#">商品紹介</a></li> <li><a href="#">お問い合わせ</a></li> </ul> |
|
1 2 |
ul.notBox li { border-left: 1px solid #000;} ul.notBox li:first-child { border-left: none;} |
上記の内容を「.not()」を用いて最初の要素以外を指定したのが下記のセレクタです。
|
1 |
ul.notBox li:not(:first-child) { border-left: 1px solid #000;} |
上記のようなセレクタ以外にも隣接兄弟結合子「+」や間接結合子「~」を用いたセレクタもあります。
|
1 |
ul.notBox li + li { border-left: 1px solid #000;} |
|
1 |
ul.notBox li ~ li { border-left: 1px solid #000;} |