隣接する要素(例えばliタグ)間にだけ、特定の装飾を施したい時に便利なCSSセレクターが「+」です。
目次
隣接セレクター「+」の使用例
たとえば、隣り合うliタグの間にだけ仕切り線を入れたい場合の使用例は下記のとおりです。
See the Pen Untitled by Satoru Shimizu (@sat-simizu) on CodePen.
隣接セレクター「+」の書き方
隣接セレクター「+」の書き方はシンプルで下記のとおりです。
CSSセレクター + CSSセレクター
実例を上げると次のようになります。
タグ名の場合
li + li {
border-left: 1px solid #333;
}
クラス名の場合
.test_li + .test_li {
border-left: 1px solid #333;
}