使えるcss、sass、jQueryのセレクタ、おさらい・覚え書き
category:web
css、sass、jQueryのセレクタ、基礎の覚書。
CSSセレクタ
- 子要素だけに適用
div > a { color:green; }
- 隣接している要素だけに適用
div + a { color:green; }
- 後ろに隣接している要素だけに適用
div ~ a { color:green; }
擬似要素・擬似クラス
- 最初の一文字にだけ適用
p::first-letter { color:green; }
- 最初の一行にだけ適用
p::first-line { color:green; }
- 要素の直前に適用
p::before { content: '『'; }
- 要素の直後に適用
p::after { content: '』'; }
- selection擬似要素(ユーザがテキストノード選択時)
CSS3公式モジュールからは削除、しかしブラウザでは幅広く実装されている(モバイルブラウザではそれほど…) p::selection { background-color:black; color: white; }
- 最初に出てくる子要素にだけ適用
p:first-child { color:green; }
- 3番目に出てくる要素にだけ適用
li:nth-of-type(3) { color:green; }
- 奇数番目に出てくる要素にだけ適用
li:nth-of-type(odd) { color:green; }
- 偶数番目に出てくる要素にだけ適用
li:nth-of-type(even) { color:green; }
- 3倍数番目に出てくる要素にだけ適用
li:nth-of-type(3n) { color:green; }
- 1,4,7,10…番目に出てくる要素にだけ適用
li:nth-of-type(3n+1) { color:green; }
- 後ろから2番目に出てくる要素にだけ適用
li:nth-last-of-type(2) { color:green; }
- 内部リンク対象のアクセスされたリンク先にだけ適用
.comment:target { background-color:green; }
- 親要素(div)の子要素(p)以外の要素すべて適用
div > :not(p) { background-color:green; }
- 子やテキストを含まない要素にだけ適用
li:empty { color:green; }
- 子やテキストを含まない要素にだけ適用
li:empty { color:green; }
- 有効になっている要素にだけ適用
textarea:enabled { background-color:green; }
- 無効になっている要素にだけ適用
textarea:disabled { background-color:#ccc; }
属性セレクタ
- すべての "title" 属性を持つp 要素を green にする
p[title] { color:green; }
- べての "title" 属性 "hoge"を持つp 要素を green にする
p[title="hoge"] { color:green; }
- すべての内部リンクを green の背景にする(前方一致)
a[href^="#"] { background-color:green; }
- ".jpg" で終わっているファイルのすべてのボーダーを red にする(後方一致)
img[href$=".jpg"] { border: solid 1px red; }
- title属性に "hoge" を持つすべてのリンクの背景を灰色にする(一部一致)
a[href*="ho"] { background-color: #ccc; }
これらは属性セレクタは複数での連結が可能。(p[]且つ[]且つ[])
p[title][href$=".jpg"][href*="ho"] { color:green; }
制約に基づく検証の擬似クラス(HTML5クライアント側 フォーム検証 API)※IE10〜
DOMフォームフィールドにrequired属性指定
- required(必須)に適用
:required { color: red; }
- optional(任意)に適用
:optional { color: green; }
フォームフィールド検証結果 valid属性 or invalid属性指定
- valid(正当)に適用
:valid { background-color: green; }
- invalid(不当)に適用
:invalid { background-color: red; }
フォームフィールドmin属性・max属性の値の範囲に指定
- 範囲内(in range)
:in-range { background-color: green; }
- 範囲外(in range)
:out-range { background-color: red; }
Sassセレクタ
- 変数
$マイセレクタ: '.contents-area, div.main' $IMG_PATH: './assets/images/bg/' $マイセレクタ { background: url($IMG_PATHbg-green.png); }
スタイル継承・スタイル定義
- @extend
ファイルを跨ぐ場合はpartial化し@importで読み込む .box { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } // .box で使ったスタイルを継承 .item { @extend .box; font-size: 1.2em; }
- @extend プレースホルダーセレクタ
継承元のセレクタは生成させない %boxBase { padding: 15px; border: 1px solid #999; } // プレースホルダーセレクタを継承 .item { @extend %boxBase; margin-bottom: 20px; } section { @extend %boxBase; margin-bottom: 60px; }
↓ cssコンパイル後item, section { padding: 15px; border: 1px solid #999; } .item { margin-bottom: 20px; } section { margin-bottom: 60px; }
- @mixin
@mixin boxSet { padding: 15px; background: #999; color: white; } div.contentsArea { @include boxSet; }
- @mixin 引数
@mixin kadomaru($value) { -moz-border-radius: $value; -webkit-border-radius: $value; border-radius: $value; } .box { @include kadomaru(3px); } .item { border: 1px solid #999; @include kadomaru(5px 10px); }
jQueryセレクタ
- 最初/最後の要素を指定
$(function(){ $('li:first').css('color','green'); $('li:last').css('color','green'); })
- 奇数/偶数の要素を指定
$(function(){ $('li:even').css('color','red'); $('li:odd').css('color','green'); })
- 特定の要素(equal)要素、その前(less than)/後(greater than)の要素を指定
(0)が1番目 $(function(){ $('li:lt(2)').css('color','blue'); $('li:eq(2)').css('color','green'); $('li:gt(2)').css('color','red'); })
- h1〜h6見出し要素をまとめて指定
$(function(){ $(':header').css('color','green'); s})
- 文字列("ホゲホゲ")が含まれる要素を指定
$(function(){ $('li:contains('ホゲホゲ')').css('color','green'); s})
- 特定の要素が含まれる要素を指定
$(function(){ $('li:has(strong)').css('color','red'); s})
- テキストや要素などなんらかの要素が含まれる要素を指定
empty擬似クラスと逆 $(function(){ $('li:parent').css('color','red'); s})
- 子要素(.sample)から直近の親要素(ul)を指定
$(function(){ $('li.sample').closest('ul').css('color','red'); s})