CSS-擬似クラスと擬似要素の概要とセレクタ指定について | みずかず
CSS-擬似クラスと擬似要素の概要とセレクタ指定について 擬似クラスと擬似要素おさらい。 擬似クラス 特定の状態にある要素にスタイルを適用するもの。 :link や :hoverなど。 擬似要素 要素の一部にスタイルを適用するもの。 要素の一行目や一文字目にスタイルを指定したり、 要素の前後にテキストや画像などを挿入することが出来る。 ::before や ::after など。 css3以前はコロン（:）１つだったが、css3から擬似クラスと擬似要素を明確にするためコロン（::）２つに変更された。 多くのブラウザでは前記法のコロン1つ（:）でも使える。 CSS対応ブラウザ確認はcaniuse.com/へ
CSS の疑似要素に疑似クラスを付ける話 - debiruはてなメモ
経緯 https://sugamocss.slack.com/ で「::before:hover みたいなのが効かないんだけど仕様だっけ」という話が出たのでメモ。 sugamocss は2009年から2013年まで東京で定期的に開催されていた Web フロントエンドな人たちが集まる Sugamo.css という勉強会の名称です。 @sigwyg Sugamo の名前使った Slack チーム作りました！事後承諾で恐縮ですが、ご許可を＞＜ https://t.co/BtkKDoH9VV— neotag (@neotag) September 1, 2015 問題 「::before:hover という記述はできるか」（疑似要素に疑似クラスを指定できるか） a 要素じゃなくてもいいですが、とりあえず a 要素で試してみます。 <div class="mod-experiment"> <a cl
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | WP-E (仮)
こんにちわ。WP-Eイクラこと@ampersand_xyzです。 CSS3のセレクタ、ちゃんと覚えてる？ 普段使わなかったりするようなセレクタって、すっかり脳みそから抜け落ちてしまい、適用されているスタイルを確認したときに あれ？コレなんだったっけ？ というセリフを何度心のなかでつぶやいたか分かりません。 また、場面によって必要に応じたセレクタを使えてるかどうかというところも気になるところ。どんなセレクタがあるのかを覚えておけば、たとえばDOMの動的生成をするときに無駄な分岐処理をしてstyle適用とか、JSでゴリゴリスタイル付与とかしなくてよくなるはずです。 おさらい用チートシート作成を兼ねて、Selector Level3 のSelectorsについて、セレクタの記法と使い方のgistつけてまとめていきたいと思います。 なお、仕様書の日本語訳は以下のページをご参照ください http:/
もう一度おさらい、CSSのセレクタ ～そして使ってみよう
IDやclassで指定するCSSはよく使うけど、それ以外のセレクタはあんまり覚えてない…というあなた。…いや私です。一緒にCSSセレクタのおさらいをしてみませんか？ 手打ちでHTMLを書いていた時代からこの仕事をしているくせに、まだへなちょこのままの鈴木です。すみません。勉強不足もいいところなのですが、ちょくちょくリファレンスやGoogle先生にお世話になっています。 先日コーディングをしている際にも、またリファレンスにお世話になったのですが、「これあんまり使ってないな～」「忘れてたな～」という反省がありまして、自分メモに限りなく近いですがいくつか共有したいと思います。 しかし、世の中にはもうすでに、CSSセレクタをきっちりがっちり解説されている先輩諸兄がたくさんいらっしゃるので、私は「こういう感じに使えるよね！」という具体例をいくつかご紹介できたらなと思っています。 ※クライアントワーク
意外と知らない！疑似要素と疑似クラスでできること | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのはるえです。 突然ですが、疑似要素と疑似クラスってありますよね。 私がCSSを覚えたてのときは「は？何これ」って感じで、得体の知れないものを見るような目で使ってました。 「この2つって何が違うの？」「どれが疑似要素で疑似クラス？」「どういうときに使うの？」と何かと敬遠しがちな人も多いと思います。 ですが、この2つを使うことでできることがぐんと広がるので、今では恐縮しながらありがたく使わせていただいております。 疑似要素とは 疑似要素とは、要素内の特定の文字や行に対してスタイルを指定したりするものです。 よく使われる疑似要素 :before{} :after{} :first-letter{} 疑似要素の中でも特に「:before」と「:after」を極めると、CSSだけのデザインの表現幅が一気に広がります。 例えば、LIGブログでも使用している「blockquote
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
