[css]:after疑似要素ってやばくね?

Posted under Webデザイン by uechoco on 水曜日 12 3月 2008 at 00 : 00 : 00

 衝撃!!!
 :afterなんて擬似要素があるのかっ!!

要素の前後に文字や画像を追加 - 疑似クラス・疑似要素 CSS辞典
http://www.seo-equation.com/html/css/false#ref7

 この擬似要素使えば、

HTML:
  1. <div style="width: 160px;">
  2. <div style="float: left;">あひゃひゃひゃ</div>
  3. <div style="clear: both;"></div>

みたいな、忌々しき空白の<div>から開放されるってことでしょ?

それにしても・・・

※Win版Internet Explorer バージョン6,7、Mac版Internet Explorer 5 は対応していません。

ま た お ま え か っ ! ! 


[css][Firefox]<input>タグの特定のtypeにCSSを適用する「input[type=text]」

Posted under Webデザイン by uechoco on 金曜日 26 10月 2007 at 16 : 07 : 37

少し前から『PHPフレームワーク完全マスター―PHP5.2.3PHP4.4.7対応』をちょっとずつ読み進めています。1日10分くらいずつなのでぜんぜん進みませんが、気にしません。

本にサンプルソースコードが載っていて、それを打ち込んで実行して勉強していたのですが、サンプルのcssファイルのソースコードに見たことない構文がありました。

CSS:
  1. div.login input[type=text],
  2. div.login input[type=password] {
  3. display: inline;
  4. width: auto;
  5. }

まぁ、見ればどんな効果か想像できる構文ですが、どうやら<input>タグの特定のtypeに対してのみcssを適用する方法だったみたいです。ただ、『エレメントで<input type="text">のみスタイルを変える』で見たところ、IEは対応しておらず、NNの6.0から対応しているものらしいです。IEはclassやidを指定してあげるか直接styleを指定してあげないといけないようですね。まぁWebサイトでinputにcssをつけたい場合は、IEにあわせてclassやidをつけて対応しろってことですね。

cssのトリビアくらいに覚えておけばいいかも。



Copyright © 2012 うえちょこ@ぼろぐ. WP Theme created by Web Top.