一覧
状態:-
閲覧数:2,260
投稿日:2016-04-11
更新日:2017-01-27
A.擬似クラス
B.擬似要素
C.属性セレクタ
D.複数セレクタ
E.子孫セレクタ
F.子セレクタ
G.隣接セレクタ
B.擬似要素
C.属性セレクタ
D.複数セレクタ
E.子孫セレクタ
F.子セレクタ
G.隣接セレクタ
A.擬似クラス / CSS3擬似クラス:シングルコロン / CSS2擬似クラス:シングルコロン
擬似クラス
pseudo-classes
・要素や属性などの文書構造だけでは特定できない “ある状況にある要素”を対象としてスタイルを適用するセレクタ
CSS3もCSS2も同じ記述方式
・何れも「:シングルコロン」使用
一覧表
セレクタの書式 | スタイルを適用する対象 | 使用例 |
---|---|---|
要素名:link | 未訪問のリンク | a:link {color:blue;} |
要素名:visited | 訪問済のリンク | a:visited {color:blue;} |
要素名:hover | カーソルが乗っている要素 | a:hover {color:blue;} |
要素名:active | クリック中の要素 | a:active {color:blue;} |
要素名:focus | フォーカスされている要素 | input:focus {background:blue;} |
要素名:lang | 特定の言語を指定した要素 | p:lang(en) {color:blue;} |
要素名:first-child | 要素内の最初の子要素 | p:first-child {color:blue;} |
要素名:nth-of-type(n) | その種類のn番目要素。途中で別の種類の要素が入る場合にはそれを数えず、 指定した種類の要素のみを数え、スタイル適用の対象を決定する | p:nth-of-type(1) |
要素名:nth-child(n) | 種類に関係なく要素を数えて、n番目 | p:nth-child(1) |
B.擬似要素 / CSS3擬似要素::ダブルコロン / CSS2擬似要素:シングルコロン
擬似要素
pseudo-element
・要素や属性などの文書構造だけでは特定できない “要素の一部”を対象としてスタイルを適用するセレクタ
CSS3記述方式
・「::ダブルコロン」使用
CSS2同じ記述方式
・「:シングルコロン」使用
CSS3擬似要素
セレクタの書式 | スタイルを適用する対象 | 使用例 |
---|---|---|
要素名::first-line | 要素の最初の一行 | p::first-line {color::blue;} |
要素名::first-letter | 要素の最初の一文字 | p::first-letter {color::blue;} |
要素名::before | 要素の直前 | blockquote::before {content::"『";} |
要素名::after | 要素の直後 | blockquote::after {content::"』";} |
CSS2擬似要素
セレクタの書式 | スタイルを適用する対象 | 使用例 |
---|---|---|
要素名:first-line | 要素の最初の一行 | p:first-line {color:blue;} |
要素名:first-letter | 要素の最初の一文字 | p:first-letter {color:blue;} |
要素名:before | 要素の直前 | blockquote:before {content:"『";} |
要素名:after | 要素の直後 | blockquote:after {content:"』";} |
C.属性セレクタ
属性セレクタ
一覧表
セレクタの書式 | スタイルを適用する対象 | 使用例 |
---|---|---|
要素名[属性名] | 特定の属性を持つ指定要素 | a[target] {color:blue;} |
要素名[属性名= "属性値"] | 特定の属性値を持つ指定要素 | a[target="_blank"] {color:blue;} |
要素名[属性名~= "属性値"] | 属性値候補と一致した要素 | p[class~="sample"] {color:blue;} |
具体例
指定文字列で開始するid
[id^="指定文字列"]
作成例
・画面サイズ700px以下でのみ適用
・tabsクラス内にあるdivの内、文字aで開始するidをセレクト
@media (max-width: 700px) {
.tabs div[id^="a"]{
position:relative;
top:1rem;
}
}
.tabs div[id^="a"]{
position:relative;
top:1rem;
}
}
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
}