【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita

2022/08/19 238 users Qiita hover focus CSS where

はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思... 続きを読む

なにこれ、すごい便利！ CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる

2022/04/12 116 users Has Visual コンテナクエリ Card Car

CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.car... 続きを読む

CSSの:nth-childと:nth-last-child擬似クラスの使用例 | NxWorld

2016/01/18 67 users nth-child NxWorld 備忘録 CSS 一瞬

今更な内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。CSSの擬似クラスにある「:nth-child」と「:nth-last-child」の使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやソースは... 続きを読む

保存版！CSS3で出来る素敵なデザインやアニメーションをまとめてみた

2015/02/04 523 users アニメーション CSS3 table-cell 保存版 横幅

この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。 ▼記事リンク Useful :nth-child Recipes | CSS-Tricks 要素を均等に横並び CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅... 続きを読む

CSSのこの用語って具体的には？がよくわかる『CSS Vocabulary』 | IDEA*IDEA

2014/04/17 96 users IDEA コード 左側 右側 CSS

ありそうでなかった解説サイト。CSS用語をクリックすると、それが実際のコードでどこにあたるのかを教えてくれます。 ↑ 右側で用語を選ぶと、左側でハイライトされます。 ↑ 例えば擬似クラスは・・・。 ↑ ここですよっと。 気になる用語があれば調べておくといいですね。 » CSS Vocabulary 続きを読む

【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。

2013/07/03 136 users Hoge child バシャログ 階層 CSS

対象になるグループの範囲は？ :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 「:(hoge)-child」は並び順→要素、「:(hoge)-t... 続きを読む

擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話｜Webpark

2013/07/01 88 users Webpark visited hover 擬似要素 link

私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス（Pseudo-classes） 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に... 続きを読む

[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

2012/07/18 574 users コリス before hover チュートリアル CSS

HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3で... 続きを読む

今流行のArctic.jsと、enchant.jsの比較 | Geisha Tokyo Engineers' Blog

2012/01/26 61 users Arctic.js enchant.js 流行 enchan

圧縮後のファイルサイズはenchant.jsのほうが3kbほど少ないですね。 どちらもjs上に継承などを行う擬似クラスを作るためのClass要素があったり、スマートフォン/PC両方で使えるようにtouch系イベントとmouseDown/Move系イベントを判定したり、fps(フレーム数）を設定してフレーム毎のイベントを設定するなどしています。 後発だけあって、Arctic.jsのほうはenchan... 続きを読む

CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌

2010/09/06 198 users prototype jQuery mootools ライ

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライ... 続きを読む

CSS セレクタに関するおさらい 2 | WWW WATCH

2007/01/11 168 users セレクタ リファレンス CSS おさらい WWW WATCH

前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス （Structural pseudo... 続きを読む