ナビゲーションはCSSの隣接セレクタで簡単設定

カテゴリー︎： 【CSS】

CSS隣接セレクタは「要素が隣接している場合にスタイルを適用」という動きになるので、

li要素がひとつしかない場合はスタイルが適用されず、

2つ以上になった場合に2つ目以降のli要素にスタイルを適用させることができる。

つまり、最初ボーダーにはスタイルを適用しないで、

２番目からborder-top: 1px..を

適用することで、最初と最後のボーダーがない状態となる

webサイトでよくあるナビゲーションで簡単に実装することができます。

↓サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>リストを作る_03</title>
</head>

<body>

<h1>リストを作る_03</h1>

<style>
body {
  margin: 0;
  padding: 0;
}

ul, ol {
  margin: 0;
  padding: 0;
}


#wrap_all {
  width: 800px;
  margin: 0px auto;
  background: tan;
}

/* リスト */
.list ul{
  margin: 0;
  padding: 0;
}

.list {
  margin: 5px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #999;
}

.list__item {
  padding: 1em;
  background: #ddd;
}

.list__item > a {
  display: block;
  margin: -1em;/*paddingで膨らむ分を相殺する*/
  padding: 1em;/*余分な余白をとる*/
  text-decoration: none;
}

.list__item + .list__item {
  border-top: 4px solid #eee;
}


/* リスト２ */

.list__item_2 {
  padding: 1em;
  background: snow;
}

.list__item_2 > a {
  display: block;
  margin: -1em;/*paddingで膨らむ分を相殺する*/
  padding: 1em;/*余分な余白をとる*/
  text-decoration: none;
}

.list__item_2 + .list__item_2 {
  border-top: 1px solid gold;
}


/* すべてのホバー */
ul.list a:hover{
  background: red;
}

</style>



<!-- <div id="wrap_all"> -->
	<ul class="list">
		<li class="list__item"><a href="">リスト１</a></li>
		<li class="list__item"><a href="">リスト２</a></li>
		<li class="list__item"><a href="">リスト３</a></li>
    <li class="list__item"><a href="">リスト４</a></li>
		<li class="list__item"><a href="">リスト５</a></li>
	</ul>


  <ul class="list">
    <li class="list__item_2"><a href="">リストA</a></li>
    <li class="list__item_2"><a href="">リストB</a></li>
    <li class="list__item_2"><a href="">リストC</a></li>
    <li class="list__item_2"><a href="">リストD</a></li>
    <li class="list__item_2"><a href="">リストE</a></li>
  </ul>

<!-- </div> -->
</body>
</html>

サンプル画面⇒隣接セレクターでナビゲーション

PAGE TOP