カテゴリー:
CSS
閲覧数:456 配信日:2016-04-18 13:30
一覧表
| 名前 | セレクタの書式 | スタイルを適用する対象 | 使用例 |
|---|---|---|---|
| 複数セレクタ | セレクタ,セレクタ | 複数のセレクタ | 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
}