カテゴリー:
CSS
閲覧数:971 配信日:2016-04-11 20:16
属性セレクタ
一覧表
| セレクタの書式 | スタイルを適用する対象 | 使用例 |
|---|---|---|
| 要素名[属性名] | 特定の属性を持つ指定要素 | 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;
}
}