• css3

    セレクタ③

    2012/11/13

    その他便利なセレクタいろいろ!

    dog.png

    CSS3のセレクタ第三弾!


    ターゲット先の要素に適用させる

    ジャンプ先の要素にスタイルを適用します。

     

    
    :target
    
    

    ここをクリックしてね

     
    ジャンプ先
     
    
    div:target{
      background: #f00;
    }
    
    

     

    IDを振ったdiv要素にa href="#○○"でジャンプさせています。
    そのジャンプした先に対してスタイルを適用します



    疑似要素でコンテンツを追加させればこんなこともできます。



    喋るよ!(クリックしてね)




    disabled状態の要素に適用する

    disabled状態(無効化)の要素にスタイルを適用します。


    
    :disabled
    
    

    
    input:disabled{
      background: #ff0;
    }
    
    

    disabled="disabled"を指定し、無効化したinputに対してスタイルを適用しました。



    disabled状態ではない要素に適用する

    上の逆ですね。無効化されていない要素にスタイルを適用します。

     

    
    :enabled
    
    

    
    input:enabled{
      background: #6FF;
    }
    
    


    チェックされたものに適用する

    ラジオボタンやチェックボックスで、チェックされたもの(checked状態のもの)にスタイルを適用します。

     

    
    :checked
    
    

    ラジオボタン1

    ラジオボタン2

    ラジオボタン3

    
    input:checked{
      width: 10px;
      height: 10px;
    }
    
    

     

    -webkit-appearance: noneと一緒に使えば、

    オリジナルのラジオボタンを作ることもできます。(参考:【CSS3】formパーツを描く



    セレクタに該当しない要素に適用する

    ()内に指定したセレクタ以外にスタイルを適用します。

     

    
    :not
    
    

    pのテキスト

    divのテキスト
    divのテキスト

    pのテキスト

    
    .box *:not(p){
      background: #FCF;
    }
    
    

     

    div class="box"の中にdivで括ったテキストとpで括ったテキストを入れました。
    その.boxの中に含まれる要素の中でp以外の要素にスタイルを適用しています。

     

     

    ユーザーの選択範囲に適用する

    ユーザーによって選択された範囲に適用します。

     

    
    ::selection
    
    

    このテキストをドラッグして選択状態にしてみてー!

    
    p::selection{
      background:#f00;
      color:#fff;
    }
    
    

     

    他の場所と違って、選択範囲の背景が赤、テキストが白になったよね?

    こういう隠れたスタイルっていいですよね!好き!

    ※firefoxは::-moz-selectionの指定になります



    〜よりも後ろにある〜に適用する

    指定した要素Aよりうしろにある要素Bにスタイルを適用します。
    というとなんか難しい感じがしますが、要素+要素のような直後だけじゃなくて、後ろにある要素に適用できるようになったってことだよ!

     

    
    要素A~要素B
    
    

    h2タイトル

    pテキストテキストテキストテキスト

    pテキストテキストテキストテキスト

    pテキストテキストテキストテキスト

    pテキストテキストテキストテキスト

    pテキストテキストテキストテキスト

    
    h2~p{
      color:#f80;
      font-size:12px;
    }
    
    

     

    こう指定することでh2の後ろにある全てのp要素にスタイルが適用されました。
    これは便利ー!使える!

     

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back