has()疑似クラスでコーディングが変わる！　CSS最新スタイリング - ICS MEDIA

2024/08/08 136 users Has ＨＡ コーディング ポテンシャル CSS

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:ha... 続きを読む

意外と面倒なtableがコピペで簡単に実装できるサンプルコード19選｜ferret [フェレット]

2015/09/02 288 users Ferret table フェレット elem コピペ

コピペで使えるtableのサンプルコード19選 1.CSS3のセレクターで作るストライプテーブル http://ascii.jp/elem/000/000/462/462099/ 汎用性の高いシンプルなストライプテーブルを作ることができるサンプルコードです。 CSS3のセレクターを使って、行・列ごとに背景色が違う典型的なテーブルをデザインします。 以前のCSS1、2の場合だと背景色を変えるのは結構... 続きを読む

CSSに死を！これはJSerの叫び！ #kbkz_tech

2015/02/16 234 users JSer 隠蔽 グローバル変数 kbkz_tech CSS

CSSの問題 セレクター設計が辛い 特に大規模化する場合、「CSSの問題」===「セレクターの問題」と言っていい （それ以外にもあるけど、大規模化するとほぼ確実にセレクターは問題になる） なぜ大規模化するとセレクターが辛くなるのか 「隠蔽ができない」 サイト全体で使用しているグローバル変数に対する定義を書いているようなもの 続きを読む

pixivのCSSで使われるクラス名ルール

2014/12/04 121 users pixiv CSS 感触 ルート 最低限

pixivで運用して上手く行っている感触のあるルールを紹介。 CSS的にルートになるセレクターのクラス名は_で始める _始まりのクラスはサイト内でユニーク CSSの何が問題か。それはどこで指定が衝突するのか分からないことである。そこさえ把握できれば気を付けながら書けるので、それでもう問題ないと思っている。CSSには機能がなく、それが美しい（ということにしておく）。最低限抑えるべき要素以外は考えない... 続きを読む

接頭辞つきのクラス名にマッチする CSS セレクター – terkel.jp

2013/03/05 81 users terkel Grid Kraken 接頭辞つき class

Kraken というフロントエンドのフレームワークのコードを見ていたら、なるほどと感心する CSS セレクターの書き方を見つけた。grid-one、grid-two みたいな接頭辞つきのクラス名にマッチするセレクターで、こんな感じ: [class^="grid-"], [class*=" grid-"] { /* ... */ } 単純に考えると [class*="grid-"] でいけそうな気が... 続きを読む

jQueryのセレクタを徹底マスターするのに最適！『jQuery Selectors』 | IDEA*IDEA

2008/11/17 247 users jQuery セレクタ IDEA November パー

jQueryのセレクタを徹底マスターするのに最適！『jQuery Selectors』 November 17, 2008 9:24 PM written by Gen Taguchi jQueryをマスターするにはまずはセレクターですよね。そこでセレクターの基礎から応用までをインタラクティブに学べるツールをご紹介。 jQuery Selectorsを使えばどんなコードを書けばページ内の任意のパー... 続きを読む