タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
CSSのコンテナクエリと:has()疑似クラスを使用するとこんなことができる、というのをGoogleデベロッパーのUna氏が公開していたので、紹介します。 簡単に説明すると、:has()疑似クラスは引数の要素を含んでいるかをCSSで判別できます。.card:has(.visual)でカード内に画像（.visual）が含まれている場合のスタイル、.card:not(:has(.visual))で含まれていない場合のスタイルを定義できます。 下記は、カードに画像が含まれている場合は見出しのfont-sizeを小さく、含まれていない場合は大きくしています。 Simple CQ Demo with :has() 先日リリースされたSafari 15.4で、:has()疑似クラスがサポートされました。Chromeは次期101のflagsで使用できる予定（Canaryはすでに使用できます）で、すべての
:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!
What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。 ユーザーの操作後に検証が行えるようになった :user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。 検証の状態とは、例えば<input type="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。 :validと
入力フォームがあるページの設計をする際はフロントエンドでもバリデーションを実装することが多くあります。代表的なバリデーションは例えば以下のようなものです。 必須の入力欄に値が入力されていなければエラーとする メールアドレス入力欄に入力された値がメールアドレス形式でなければエラーとする パスワードとして使用できない文字が入力されればエラーとする 入力内容が不適切な場合は、入力欄に装飾を施すために:validと:invalidの2つの擬似クラスを利用してきました。 :validと:invalidは、主にフォームコントロール要素に関連する擬似クラスで、以下のような基準にしたがって各要素の状態がマッチするかどうかを判定します。 required属性付きの入力欄が空でなければ:valid、空であれば:invalid type属性がemailである入力欄に入力された値がメールアドレス形式であれば:va
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか
【初心者向け】CSSの擬似要素と擬似クラスを理解しよう！ | ビジネスとIT活用に役立つ情報（株式会社アーティス）
前回の記事【初心者向け】CSSセレクタとは？セレクタの種類や指定方法を解説！（基礎編）ではCSSセレクタの基本的な知識と指定方法をご紹介しました。 今回は、よりコーディングの幅が広がる「擬似要素」と「擬似クラス」に関して解説していきます。 擬似要素とは ～擬似要素の適用例～ 擬似要素とは、要素の一部に対してスタイルを適用できる指定方法です。 HTMLの要素を擬似的にCSSで設定するので、コーディングに手を加えることなく装飾を適用することができます。 例として、下図のように見出しの先頭一文字のみ文字の色を変える装飾を実装してみましょう。 擬似要素を使わない場合 擬似要素を使わずにこれを表現すると、HTMLとCSSの記述は下記のようになります。 見出し要素のh2の一文字目のみをspanタグで囲い、スタイルを適用しています。 この方法でも装飾は可能ですが、テキストをspanタグで無理やり区切って
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に 12月19日、Firefox121がリリースされた。このバージョンで、CSSの関係（リレーショナル）擬似クラス:has()に対応した。ほかの主要ブラウザ（Chrome、Edge、Safari）ではすでに対応しており、これで:has()が一般的に使えるようになったと言える。 :has()を簡単に説明すると、あるセレクタ（A）に結合子（>、+、~などの明示的な結合子、または暗黙的な子孫結合子）を使って相対するセレクタをhas()内に記述し、その関係性を実際に持つ場合にセレクタ（A）にスタイルを適用できるという擬似クラス。 :has()を使うことで、子の要素に○がある要素、次の要素が△である要素といった、これまでできなかったかたちでスタイルを適用できるようなり、より効率的にCSSを書けるように
新しい擬似クラス :is() / :has() / :where() の仕様を調べてみた - Qiita
Selectors Level 4 (W3C Working Draft, 21 November 2018) の 4. Logical Combinations に載っている新しい疑似クラス :is() / :has() / :where() について調べてみました。 以前の仕様では :matches() や :any() という名称でしたが、最新のドラフトでは :is() に変更されています。新しい疑似クラスといってもこの仕様自体は2011年ごろから草案に上がっていたようですね。なげー…。 （※ 試しに Gecko のソースコードをちょっと覗いてみたらちゃんとリネームしてましたね。→ https://github.com/mozilla/gecko-dev/commit/fbf94105b88ce3e809467b98958878327e6deac0 ） 特長 :is() のカッコ内に
【脱:擬似クラスhover】全デバイスでhoverイベントを安定させる方法 マウスで対象要素にホバーした時、簡単に色や大きさを変化させることができる便利なCSS擬似クラス:hover。 ですがCSSを使わずにhoverイベントを設定できる方が、デバイスに合わせた処理ができるため、CSS擬似クラス:hoverはあまりオススメしていません。 その理由と設定方法について解説します。 CSS擬似クラス【:hover】を使わなくなった理由 以前は擬似クラス【:hover】は非常に便利なCSSとして使用していました。 ですが一点のみ悩んでいた部分があります。 それはタブレットでの【:hover】の挙動です。 レスポンシブ対応にてホームページを制作する際に、PCサイト用のCSSとスマートフォン用のCSSは別々に記述しています。 <link rel="stylesheet" type="text/css"
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
CSSのコンテナクエリと:has()擬似クラスを使用すると、こんなことができるようになる
:user-validと:user-invalid擬似クラス | フロントエンドBlog | ミツエーリンクス
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
Firefox 121でCSSの関係擬似クラス:has()に対応し、主要ブラウザすべてで使用可能に | gihyo.jp
【脱:擬似クラスhover】全デバイスでhoverイベントを安定させる方法
goetheweb.jp
chess-etc.jp
nordot.app
www.earth-garden.jp
www.lifehacker.jp
setouchi.by-onko-chishin.com