WEB掻っ穿じり

WEB備忘録とチャリとカメラ

使える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})