タグ 擬似クラス
人気順 10 users 50 users 100 users 500 users 1000 usersウェブサイトを訪れたユーザーの閲覧履歴を不正に取得する方法とは?
インターネットを利用していると、一度訪問したページのリンクが別の色で表示されることがあります。これはスタイルシート言語であるCSSの擬似クラス「:visited」を活用したもので、一目で自身が訪問したページやリンクを判断することができます。しかし、一部のユーザーは:visited擬似クラスを悪用してユーザーのウェブ... 続きを読む
【CSS】きみは "擬似クラス" 何個言えるかな?? - Qiita
はじめに あなたは "擬似クラス" 何個言えますか? 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか? でも、"擬似クラス" 何個言えますか?と聞かれると数個くらいしか思... 続きを読む
なにこれ、すごい便利! CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像(.visual)が含まれている場合のスタイル、.car... 続きを読む
CSSの:nth-childと:nth-last-child擬似クラスの使用例 | NxWorld
今更な内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。CSSの擬似クラスにある「:nth-child」と「:nth-last-child」の使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやソースは... 続きを読む
保存版!CSS3で出来る素敵なデザインやアニメーションをまとめてみた
この擬似クラスを使うことにより3番目のli要素にわざわざ別のクラスを付けなくても独自のスタイルを適応することができるので、運用性の向上が図れます。 ▼記事リンク Useful :nth-child Recipes | CSS-Tricks 要素を均等に横並び CSS3の「display:table-cell」は要素を均等に横並びにすることができます。「float」でも要素を横並びに出来ますが、横幅... 続きを読む
CSSのこの用語って具体的には?がよくわかる『CSS Vocabulary』 | IDEA*IDEA
ありそうでなかった解説サイト。CSS用語をクリックすると、それが実際のコードでどこにあたるのかを教えてくれます。 ↑ 右側で用語を選ぶと、左側でハイライトされます。 ↑ 例えば擬似クラスは・・・。 ↑ ここですよっと。 気になる用語があれば調べておくといいですね。 » CSS Vocabulary 続きを読む
内包要素の数が変動しても僕には擬似クラスと間接セレクタがある | dskd
内包要素の数が変動しても僕には擬似クラスと間接セレクタがある 2013/12/04 11:15 category : Advent Calendar, CSS CSS Property Advent Calendar 2013 4日目のエントリです。 昨日、げこたんさんに BEM Advent Calendar を手伝ってもらったら、 おや?プロパティの方に恩返しがありませんね?— げこたん (@... 続きを読む
【CSS】擬似クラスの:(hoge)-child系と:(hoge)-type系の違いをここいらでしっかり覚えておこうか。 | バシャログ。
対象になるグループの範囲は? :(hoge)-child系、:(hoge)-type系のいずれもグループ内での順番を判定します。 その対象となるグループは、同じ階層に並んでいるひと続きの要素群となります。 図にするとこのような感じ。 直属の親要素が異なると、別グループになります。 また、グループ内の要素の種類は一種類に限りません。 「:(hoge)-child」は並び順→要素、「:(hoge)-t... 続きを読む
擬似要素と擬似クラスの違いやダブルコロンとシングルコロンの話|Webpark
私のように趣味でWebサイト作成をしていると基礎が抜け落ちていたりするので復習を兼ねて擬似要素と擬似クラスの違いについて考えてみました。 擬似クラス(Pseudo-classes) 擬似クラスには次のようなものがあります。何気なく使っていますが、擬似クラスという名称を知らない方も多いのではないでしょうか。 :link :visited :hover :active で、擬似クラスはCSS3で大幅に... 続きを読む
:nth-* 擬似クラスのおさらいメモ | Unformed Building
:nth-* 擬似クラスの引数の理解がいまいちだったのでおさらい。 構文について。 ここでの INTEGER は [0-9]+ である。 nth : S* [ ['-'|'+']? INTEGER? {N} [ S* ['-'|'+'] S* INTEGER ]? | ['-'|'+']? INTEGER | {O}{D}{D} | {E}{V}{E}{N} ] S* ; n は 0 もしくは正の... 続きを読む
[CSS]なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス
HTMLを汚したくない、もしくは変更することができないときに役立つ擬似要素の基本的な使い方から応用テクニックまでを紹介します。 擬似要素で、div要素の両端にシャドウをつけたり、一枚の画像を重ねたりすることができます。 擬似クラス、擬似要素 擬似要素の記述は一つのコロンを使用し、「:before, :after」となります。 コロンを使用するものは他に、「:hover」などの擬似クラス、CSS3で... 続きを読む
:window-inactive 擬似クラスと animation-play-state | Unformed Building
まあタイトル通りなんですが、ブラウザウィンドウが非アクティブになったらアニメーションを停止したいという話です。 今は Firefox をメインに使っているんですが、要素をアニメーションさせたりすると Chrome や Safari に比べて結構な負荷がかかるのです。 アニメーション回数を無限に指定していると、それを表示しているタブが最前面にある限り、ウィンドウがアクティブであろうとなかろうとアニメ... 続きを読む
今流行のArctic.jsと、enchant.jsの比較 | Geisha Tokyo Engineers' Blog
圧縮後のファイルサイズはenchant.jsのほうが3kbほど少ないですね。 どちらもjs上に継承などを行う擬似クラスを作るためのClass要素があったり、スマートフォン/PC両方で使えるようにtouch系イベントとmouseDown/Move系イベントを判定したり、fps(フレーム数)を設定してフレーム毎のイベントを設定するなどしています。 後発だけあって、Arctic.jsのほうはenchan... 続きを読む
CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」:phpspot開発日誌
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3の擬似クラスがIEでも使えて効率的なスタイリングが可能になります。 jQuery, prototype, mootools等と同時に使うことができ、 使えるプロパティはライ... 続きを読む
CSS セレクタに関するおさらい 2 | WWW WATCH
前回の続きです。今回も引き続き、CSS3 で定義予定のものも含めて、CSS セレクタのリファレンスいきます。 今回は擬似クラスを中心に取り上げてみますが、CSS3 では擬似クラスが大幅に拡張されていますので、見慣れないものばかりかと思いますが、知っておくといいかもしれません。ただし、ブラウザのサポートはまだまだですので、実用性は高くないと思います。 擬似クラス (Structural pseudo... 続きを読む