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})
        

comments powered by Disqus