D.複数セレクタ ／ E.子孫セレクタ ／ F.子セレクタ ／ G.隣接セレクタ

一覧表

名前	セレクタの書式	スタイルを適用する対象	使用例
複数セレクタ	セレクタ,セレクタ	複数のセレクタ	h1, h2 {color:blue;}
子孫セレクタ	セレクタ セレクタ	下の階層の子孫要素	p strong {color:blue;}
子セレクタ	セレクタ>セレクタ	直下の階層の子要素	p > strong {color:blue;}
隣接セレクタ	セレクタ+セレクタ	直後に隣接している要素	h1 + p {color:blue;}

---

子セレクタ

▼HTML

<div class="mobile clearfix">

  <div class="header">

    <span class="ion-ios-navicon pull-left"><i></i></span>

    <span class="title">ホーム</span>

  </div>

  <div class="sidebar">

  </div>

</div>

▼CSS

.mobile .header .ion-ios-navicon>i {

  height: 1px;

  width: 20px;

  margin-top: 5px;

  background: #fff;

  position: relative;

  display: inline-block

}

.mobile .header .ion-ios-navicon>i:after,

.mobile .header .ion-ios-navicon>i:before {

  content: '';

  width: inherit;

  height: inherit;

  position: absolute;

  background: inherit

}

.mobile .header .ion-ios-navicon>i:before {

  bottom: 12px

}

.mobile .header .ion-ios-navicon>i:after {

  bottom: 6px

}