【CSSセレクター「+」】隣接するliタグ間に仕切り線を入れたい時など【隣接結合子】

隣接セレクター「+」のサムネイル

隣接する要素(例えば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;
}
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

■清水WEB制作代表
■コーディング:WordPress(オリジナルテーマ制作等)・HTML・Sass・FLOCSS・JavaScript(jQuery)等
■集客力:YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成:博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術:Amazon Kindle出版で、写真集・撮影編集解説書を5冊好評発売中です

目次