• css3

    セレクタ①

    2012/10/23

    属性値で一致させるセレクタ

    みつこちゃん

    css3のセレクタで、IDやクラスを付与しなくても
    特定のものにしぼってスタイルを適用することができるようになりました。

    css2でもいくつかありましたが、css3はさらに便利に!

     

    ※沢山あるので分けてかきます。

    第1弾は、属性値で一致させる!です。

     

    属性値の始まりで一致させる

    4枚の画像を並べました(すんごいペイントですみません)

     

    花子ちゃんうさこちゃん次郎くんみつこちゃん

     

    このimg要素の中で、属性値の始まりが一致する画像にスタイルを適用します。
    ※属性っていうのはimgだったら"src"とか"alt"とか、タグ内で指定してるアレだよ!


    書き方はこれ

    
    要素[属性名^="始まりの文字列"]{
    	・・・
    }
    
    

    ちょっとcssでは見慣れない書き方ですね。

    これを記述して、画像名が"img/animal_"から始まるものだけにスタイルを適用します。


    花子ちゃんうさこちゃん次郎くんみつこちゃん

    
    img[src^="img/animal_"]{
      border:5px solid #3F0;
    }
    
    

    アニマルに限定されて緑色の枠がつきましたね!



    属性値の終わりで一致させる

    同様にこのimg要素の中で、属性値の終わりが一致する画像にスタイルを適用します。
     

    書き方はこれ

    
    要素[属性名$="終わりの文字列"]{
    	・・・
    }
    
    

    これまた見慣れない書き方ですが
    これを使ってpng形式の画像のみにスタイルを適用します。


    花子ちゃんうさこちゃん次郎くんみつこちゃん

    
    img[src$=".png"]{
      border:solid 5px #03F;
    }
    
    

    拡張子が.pngの画像に青枠がつきました。

    なんと!犬と男の子だけ.png形式だったんですね!(うさぎと女の子は.jpgでした)



    含まれる文字列で一致させる

    始まり、終わりだけでなく、含まれる文字列で一致させることもできます。


    書き方はこれ

    
    要素[属性名*="含まれる文字列"]{
    	・・・
    }
    
    

    んーやはり見慣れない!いや、慣れてきた?
    これを使って、この中でaltに花子という文字列を含む画像にスタイルを適用します。
    なんかクイズみたいになってきました!


    花子ちゃんうさこちゃん次郎くんみつこちゃん

    
    img[alt*="花子"]{
      border:solid 5px #f00;
    }
    
    

    なんと!花子は女の子ではなく、犬だったんですね!
    つまりこの犬はメスですね!



    このように、属性値を指定してスタイルを適用するセレクタの紹介でした。


    【CSS3】セレクタ②に続く

    タグ:CSS3

この記事へのコメント

コメントを送る

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

back