はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、: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"
完全な初心者はこちらから!ウェブ入門ウェブ入門基本的なソフトウェアのインストールウェブサイトをどんな外見にするかファイルの扱いHTML の基本CSS の基本JavaScript の基本ウェブサイトの公開ウェブのしくみHTML — Structuring the webHTML概論HTML 入門HTML を始めようヘッド部には何が入る? HTML のメタデータHTML テキストの基礎ハイパーリンクの作成高度なテキスト整形文書とウェブサイトの構造HTML のデバッグ手紙のマークアップコンテンツのページの構造化Multimedia and embeddingマルチメディアとその埋め込みHTML の画像動画と音声のコンテンツobject から iframe まで — その他の埋め込み技術ウェブへのベクターグラフィックの追加レスポンシブ画像Mozilla のスプラッシュページHTML tablesH
【CSS】擬似クラス :not( )・:is( )・:has( )・:where( ) - Qiita
概要 W3CのCSS Values and Units Module Level 4で、擬似クラスについていくつか仕様が変更されました。 この変更では、擬似クラスに 論理的な組み合せ、属性セレクタ、自然言語に関する擬似クラスなど、多くの擬似クラスが追加されました。 そのため、この記事では追加された、論理的な組み合せの擬似クラスの:not()・:is()・:has()・:where()について解説していきます。 否定疑似クラス :not( ) 否定疑似クラス :not( ) は、列挙されたセレクターに一致しない要素を表す、関数形の擬似クラスになります。 基本構文 クラス名がstyleの中で、pタグでないモノのスタイルを指定します。 :not() を使用する際、以下の場合は気をつけてください。 否定疑似クラスを入れ子にすることはできません。 例 ） ❌ :not(:not(...)) 否定疑似
みなさんこんにちは！ワトスンです。 今回は、、 CSSの擬似クラス:checkedの使い方が知りたい。効かないけどどう対処したらいいの？ といった悩みに答えます。 ■読んでほしい人 CSSの基本を理解できている方 ぜひ皆さんには、擬似クラス「:checked」の使い方をマスターしてもらい、コーディングの可能性を広げてもらえたらなと思います。 CSSの擬似クラス:checkedの使い方 「:checked」を使用シチュエーションは以下のような時です。 ・「メニューボタン」を押してメニュー一覧を表示させる ・「チェックボタン」を押しボタンのデザインを変更させる なんらかの要素を押して、動きをつけたりデザインを変更させたりする際に使用します。 とても便利な擬似クラスなのでぜひ使いこなせるようにしましょう。 それでは具体的な使い方をご紹介していきます。 :checkedの使い方 擬似クラス:che
こんにちは！ライターのナナミです。 みなさん、CSSを書いているとき この要素にはこのCSSを適用させたくない… ということがあったりしませんか？ 例えば、リストの一番下の要素にはmarginを入れたくないとか… そういうときに、わざわざそれだけ別のclassを入れたりするのは手間ですよね。 でも大丈夫！ なんと擬似classを使えば、CSS上でコントロールが可能なのです。 ということで今回は否定の擬似class、notについて解説していきます。 この記事は下記の流れで進めていきます。
<details>要素のname属性サポート・:dir() CSS 擬似クラスなど - What's new in Browsers!
※ この記事は Cybozu Frontend Advent Calendar 2023 の 2 日目の記事です ! What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。 今回は Chrome 120 の更新内容から CSS/HTML に関する気になるトピックとして以下の 4 つをピックアップして紹介します。 Accordion pattern using name attribute on <details> :dir() pseudo-class selector CSS <image>, <transform-function>, <transform-list> syntax for registered custom properties Media Queries: scripti
focus() メソッドで CSS の :focus-visible 擬似クラスが適用されるかどうかは最後の操作によって異なる
focus() メソッドで CSS の :focus-visible 擬似クラスが適用されるかどうかは最後の操作によって異なる 2023.01.28 :focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたい時に便利です。この擬似クラスはキーボード操作によりフォーカスされた場合に適用されますが、マウス操作によりフォーカスした場合には適用されません。 それでは、JavaScript の focus()メソッドによりフォーカスされた場合には、`:focus-visible` 擬似クラスは適用されるのでしょうか？実はこれは最後 `focus()` メソッドが呼ばれる前に要素にフォーカスがあったかどうかにより異なります。 :focus-visible 擬似クラスはユーザーの入力方法によって異なるフォーカス表示をしたいときに便利です。この擬似クラスはキーボード操
はじめに 新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay24です！ 昨日は「Ruby 後置whileの挙動をみる」と言う記事でした。 Ruby 後置whileの挙動をみる 本記事では、CSSの「:not」という否定擬似クラスの使い方とできることについて書いていきます。 :not否定擬似クラスの基本 :not否定擬似クラスとは？ :notとは、CSS上で特定の要素やクラス以外のものを指定したい時に使う擬似クラスです。 特定の要素やクラス以外のものを取得するため、「否定擬似クラス」とも呼ばれています。 :notの基本的な構文 :not(hogehoge) { プロパティ: 値; } これが基本的な、:notの構文です。 hogehogeの中身が今回取得しない対象を表します。 :notの例文1 <ul> <li>apple</li> <li class="sample">o
属性セレクタは直感的でよく使うのですが、否定の構文がないので困っていました。調べると否定擬似クラスがあることが分かりました。属性セレクタと組み合わせて使う方法が難しかったのでメモしておきます。 HTML link要素が２つあります。media属性が存在しないlinkだけ取得する方法の紹介です。 <head> <link href="a.css" rel="stylesheet" media="only screen and (max-width: 320px)" > <link href="b.css" rel="stylesheet"> </head>
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う 2023.10.13 ユーザーの操作の後にフォームの検証に基づき有効か無効かを示すために使用できる :user-valid、:user-invalid 擬似クラスを紹介します。従来の :valid、:invalid 擬似クラスと異なり、ユーザーがフォームに入力するまではスタイルを適用されません。 :user-valid、:user-invalid 擬似クラスは、ユーザーの操作の後フォームの検証に基づき有効か無効かを示すために使用できます。フォームの検証として、以下のような例があげられます。 required 属性を指定した要素に値が入力されているか pattern 属性を指定した要素に指定した正規表現にマッチしているか min や max 属性を指定した要素に指定した範囲内の値が入力されているか
はじめに あなたは "擬似クラス" 何個言えますか？ 擬似クラスには、:hover や :active、:focusといったよく使うものから、 :is()や:where()、:has()といったこれからサポートされていくものまで たくさん種類があるのは、ご存知ではないでしょうか？ でも、"擬似クラス" 何個言えますか？と聞かれると数個くらいしか思い出せないと言う方は多いのではないでしょうか？ もしかしたら、15個以上言えたら、CSS玄人と言えるかも知れません。 この記事では、たくさん種類があるのは知っているけど、詳しくはわからない "擬似クラス" が、 何種類あるか、どんな擬似クラスがあるかをまとめました。 知らなかった "擬似クラス" の数を数えながら、読んでいただけると嬉しいです。 擬似クラス 擬似クラスとは？ 擬似クラスとは、セレクタのあとにつけることで、 指定した要素の状態に応じて
【CSS3】特定のclass等を除外する擬似クラス『:not()』 - 株式会社ネディア │ネットワークの明日を創る│群馬
HTML側にclassを追加したりCSSを直書きすることは出来ない環境においてCSSの擬似クラスを利用してコーディングする際、『特定のclassを除外する』CSSを用いてスマートなコーディングが出来ます。 特にWordPress環境では、bodyタグにclassがたくさん記述されるので、その記述のなかのclassを拾い出して除外する手法でコーディングを行ってみました。 CSS3の擬似クラス『:not()』 bodyタグに記述される『.home』に対して、トップページ「以外」に適用したいCSS（トップページだけは除外するCSS）を記述します。 都合良くサブページにはサブページ用のクラスが記述されていれば良いのですが、CMS等によりページが新規追加された際に任意のページ名がclassとして記述される事が多々あります。 HTMLを変更することが出来ない、どんなclass名になるかわからない今後追
個人的に使用頻度の低い擬似クラスたち
MDNのデザインが新しくなりましたね。 私としては以前よりも見やすくなっている印象で、大変ありがたく思います。 せっかくのリニューアル記念（？）ということで、サイト内を適当に巡回していたところ、たまたまCSSの擬似クラス一覧にたどり着きました。 どうせならと思い、個人的に使用頻度の低い（もしくは使用したことのない）擬似クラスについてまとめてみました。 擬似クラスとは そもそも擬似クラスとはなんですかという話です。 ざっくりいうと要素の状態を指定できる便利なやつです。 たとえば:hoverなんかは頻繁に使われる擬似クラスですね。 以下はマウスポインターが（対象の）要素上にある状態の時に、背景色を変化させるコードです。
初心者向けにCSSでnth-of-typeを使って特定の要素にだけスタイルをあてる方法について解説しています。実際にコードを書きながら例をもとに説明しているので、自分でも書きながら理解していきましょう。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方 更新日：2021/08/31 コーディングでは、他人から見たとき見やすいコードにすることを心がけますよね。 先輩が書いたコードを見るとなんか見やすいなって思うんです。 そこで、見やすいコードと見にくいコードの何が違うのだろうと考えたときに、不要なタグやクラスがなく、全体がすっきりしていることが見やすいコードへの近道だと感じました！ ということで、今回は不要なクラス指定をせずにCSS側で要素を操れる擬似クラスを紹介していこうと思います。 擬似クラスとは擬似クラスとは要素の状態により、スタイルの指定をすることができるクラスです。 そのため、不要なクラスをつける必要がなくなり、すっきりとしたコードにすることができます。 どれくらいコードがすっきりするのか以下で比較をしてみました。 Before 擬似クラス未使用の
概要 何故かMaterial-UIのCreateStyles環境下における擬似クラスの取り扱いの記述が公式にあまりなかった為、どうやって適用すれば良いのか当初詰まりました。 最終的にこうやれば良いのだと発見した為、確認できた対応方法を記載致します 記載方法 const useStyle = makeStyles(theme => createStyles({ box1: { color: 'black', '&:focus': { '& + $box2': { color: 'red', }, }, }, box2: { color: 'black', }, }), ); export function InputStandard() { const clsx = useStyle(); return ( <div> <input className={clsx.box1} /> <div
【CSS】CSSの擬似クラス :toggle()を使ってToggle Switchを作る - Qiita
概要 みなさんは、CSS Toggles:toggle()という擬似クラスをご存知でしょうか？ 実は、2022年4月28日に Tab Atkins Jr. (Google)とMiriam E. Suzanne (Invited Expert)によって、 CSS Toggles:toggle()という、CSSだけでON/OFFの値に応じて、スタイルを変更する機能の草案が提出されました。 今回は、このCSS Togglesの機能を使って、Toggle Switchを作ってみました。 CSS Togglesの詳しい機能については以下の記事でまとめたので、ご一緒にご覧ください。 CSS Toggles:toggle()はまだ公式に提案するための草案のため、 この記事のデモはJS-polyfillを使って作成しています。ご注意ください。 ※ JS-polyfillは、平たく言うと、「Chromeでは
スマホの小さい画面でメニューをしまっておくのによく使われるハンバーガーメニュー 。これまではJSのクリックイベントでclass名を追加して実現してました。擬似クラス:targetを使うとCSSだけで実現できると知って試してみた。 【目次】 JS（クリックイベント）を使ったハンバーガー HTMLのコード CSSのコード JSのコード CSS（擬似クラス:target）のみのハンバーガー HTMLコード CSSコード scroll-behavior: smooth（CSSだけでスムーススクロール） 最後に JS（クリックイベント）を使ったハンバーガー これまでのハンバーガーメニュー。こんなです。 ヘッダー右上の開くボタン（三）を押すと右側からハンバーガーメニューが出てきます。メニューの中の閉じるボタン（×）を押すとメニューが閉じる。 HTMLのコード <nav> <div id="open"
CSSにおける:before, :afterとか:hoverのことを擬似要素とか擬似クラスと言いますが、両者の違いは何なのかを調べてみました。 同じ意味でただ別の呼び方をしてるだけと思っていたのですが、両者には明確な違いがあったようです。 擬似クラス及び擬似要素の概念 擬似クラスおよび擬似要素がW3Cの公式文書によってどのように説明されてきたのかを確認していきます。 CSS2.1での説明 現在「勧告」となっている最新版、CSS2.1での説明をまずは確認してみましょう。 引用元：CSS 2.1 Specification 日本語訳 - 疑似要素と疑似クラス 原文：Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification CSSは、文書ツリーの外側にある情報に基づいた書式設定を可能にするために、疑似要素や疑似クラスの概念
:visited擬似クラス－スタイルシートリファレンス
要素型セレクタ（タイプセレクタ） …… 特定の要素にスタイルを適用する 全称セレクタ（ユニバーサルセレクタ） …… すべての要素にスタイルを適用する classセレクタ（クラスセレクタ） …… 特定のclass名がつけられた要素にスタイルを適用する idセレクタ …… 特定のid名がつけられた要素にスタイルを適用する :link擬似クラス …… 未訪問のリンクにスタイルを適用する :visited擬似クラス …… 訪問済のリンクにスタイルを適用する :hover擬似クラス …… カーソルが乗っている要素にスタイルを適用する :active擬似クラス …… クリック中の要素にスタイルを適用する :focus擬似クラス …… フォーカスされた要素にスタイルを適用する :lang擬似クラス …… 特定の言語を指定された要素にスタイルを適用する :first-child擬似クラス …… 最初に現れ
Next.jsでfocusなどの擬似クラスを書くとき ReactではCSSを書くときにinline stylesで書けます。 しかし、Next.jsで擬似クラスを書こうとしたら、うまく反応してくれなかったので、 Styled JSXを使った時のメモをを残します。 問題点 inline stylesでCSSを記載していたのですが、何故か:focusなどの擬似クラスが反応してくれませんでした。 import React from 'react' // ex const Password = () => { return ( <input type='password' style={style} /> ); } // :focusの部分が擬似クラスとして読み込まれていない？ const style = { border: '1px solid #1b2538', ':focus': { bor
【Jquery】【javascript】現場で使うJqueryの文・メソッド・擬似クラス・イベントまとめ - Qiita
find() val() closest() eq() html() index() get() includes() removeClass() parseInt() is() empty() addClass() append() map() pop() slice() clone(true)
CSS3 UI要素状態擬似クラス :disabled、:checkedの確認です。checkのオンオフが適用される対象としては、inputタイプのcheckboxやradioがあります。今回は、disabledの適用を考慮してcheckboxで試すことにしましたが、checkboxに限らずformに使う部品はブラウザ毎のデザインの違いが大きいので、一度ブラウザ固有のデザインを消して、CSSで再構築しています。 サンプルは、企業などの本店、支店を選ぶcheckboxになっています。本店は必ず選択（最初からチェック checked）、変更不可（チェックを外せない disabled）になり、東京は工事中ということで、利用不可（チェックできない disabled）。他はチェックのオンオフ可能という設定にしています。 サンプル サンプルのhtmlソース <div class="wrap"> <inp
条件を組み合わせたい（論理積）ことは多い例えば、擬似コードですが、 if(day ≠ "日" ∧ day ≠ "土") return 営業 else return 休日このような２つの条件、Aでもなく、Bでもない、という書き方をすることがあります。 CSSではどうすればよいのでしょうか？ 否定擬似クラス:notを組み合わせる否定擬似クラス:notがありますが、複数組み合わせる場合は実はつなげて書きます。 これは、「.entry-card-titleクラスでもなく、.related-entry-headingクラスでもないh2タグ」という意味になります。
![「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]](https://cdn-ak-scissors.b.st-hatena.com/image/square/48e8d7b115d95a14455aa2a9e99164a4ec2a547b/height=288;version=1;width=512/https%3A%2F%2Fchiilabo.com%2Fwp-content%2Fuploads%2F2020%2F09%2FScreenShot-2020-09-17-12.42.27-1.png)
<section className="sample1"> <ul> <li>アイテム 1</li> <li className="special-item">特別なアイテム</li> <li>アイテム 3</li> </ul> <ul> <li>アイテム 4</li> <li>アイテム 5</li> </ul> </section> ul:has(.special-item) { border: 2px solid blue; padding: 10px; } ul:has(.special-item) > li { font-weight: bold; } フォーム入力の検証結果に基づくラベルのカスタマイズ このサンプルでは、フォーム入力が有効か無効かに基づいて、ラベルにチェックマークまたはバツマークを表示します。:has疑似クラスを使って、隣接する入力フィールドの検証結果に応じたスタ
ニワカが個人的に使いこなせていないCSSを覚えるための個人的メモです。 擬似要素と擬似クラスをまとめる前に違いを覚えておくためのメモ。 最初に書いておくとW3Cの日本語訳や色々なサイトを見ましたが、小難しい説明できちんと理解はまだ出来ていません。 擬似要素(Pseudo-elements)の概要 擬似要素は要素内の一部（特定のパーツ）に対してスタイルを適用する。 CSS3までで勧告されているのは以下の4つ。 ::before ::after ::first-letter ::first-line 他に、::selectionがCSS3で草案止まり、::backdropと言うのが実験段階であるようです。 ::first-letterが、最初の一文字目のみに、::first-lineが文章の一行目のみにスタイルが適用されるように、要素内の一部に対してというのが特徴。::beforeや::aft
CSSの擬似クラス:has()を実際に使ってみた
こんにちは。Gaji-Labo 横田です。2023年も4ヶ月が過ぎようとしています。今回は2023年から使っていきたい CSS の疑似クラス :has() を実際に使ってみた例を紹介したいと思います。 特定のコンポーネントがある時だけ親要素に余白を持たせたい特定のページにだけ position: fixed した下部コンポーネントが出現する、カートやログイン機能を持つプロジェクトなどでよくある例です。フッターは全ページ共通ですが、 position: fixed の下部コンポーネントがあるページでは、そのコンポーネントの高さ分だけフッターに余白を作らないと、フッターの中身が fixed のコンポーネントに隠れてしまいます。 下部固定のボタンコンポーネントでコピーライトが隠れてしまうこのような例はこれまで CSS だけで完結できませんでしたが has() を使えば CSS だけでスタイルの分
Webページ内でウィンドウの開閉アニメーションを実装していきたい時には、JavaScriptやJavaScriptのライブラリであるjQueryなど、プログラミングを駆使して実装していくことになりますが、aタグ（アンカー要素）と併用してCSSの「:target擬似クラス」を利用すると、クリック処理で要素の表示をコントロールすることができます。 :target擬似クラスは、一致するidを持つ固有の要素が対象要素となります。 その対象要素に対して、CSSで表示または非表示のスタイルを適応させれば、ウィンドウの開閉アニメーションのように表示をコントロールすることができます。 :target擬似クラスを利用するとJavaScriptを使わず、CSSのみでLightbox（ライトボックス）を作成することもできます。 以下、Webブラウザのサポート状況になります。 :target擬似クラスはCSS3か
CSS Tips - :placeholder-shown 擬似クラスを使ってMaterial Designっぽい input を作ってみた
今回は :placeholder-shown という擬似クラスの使い方の紹介をしたいと思います. 動くサンプルも作ってみたので良かったら参考にしてください. :placeholder-shown とは？ :placeholder-shown とは, CSS の擬似クラスのひとつで, 指定することで placeholder が表示されているときのみ有効になるスタイルを定義することができます. input:not(:placeholder-shown) { ... } とすれば placeholder が表示されていないとき, つまり値が入力されているときのみ効くスタイルを定義することもできます. 上手く使いこなせば今まで JavaScript で実装していたことを CSS 完結で実装することができます. サンプルプログラム サンプルです. Material Design によくある inpu
これは、サイバーエージェント24卒内定者アドベントカレンダー25日目の記事です。 Webフロントエンドのトピック以外にもたくさんの記事が公開されているので、ぜひみてみてください！ 今回は、最近特に英語圏で注目を集めているCSSライブラリ「CSS Hooks」についてご紹介します！ このライブラリは、CSS Modulesのco-authorでvanilla-extractの作者であるMark Dalgleish氏が大注目しており、自分はこのポストが知るきっかけになりました。 日本語での情報が少なそうだったので、基本的なライブラリの紹介、使い方、仕組みについて触れていこうと思います。 CSS Hooksとは Inline styles形式で型安全にCSSを記述できるライブラリです。 通常のInline stylesと異なり、擬似クラスやメディアクエリ、コンテナクエリなども同様にInline
「:hover」とは 「:hover」も擬似クラスの一つになります。 この「:hover」では要素の上にマウスのポインタを要素の上に置いたときに実行されるクラスです。 サイトの中で、要素にマウスポインタを重ねる必要があるものといえば、リンクですよね。 なので、リンクを作成するaタグと一緒に使われることが多い擬似クラスです。 この擬似クラスを使うことで、記事のURLに装飾を加えたり、クリックしたくなるようなボタンを作ることが出来ます。 aタグに使える擬似クラス 「:hover」の他にもaタグに適用できる代表的な擬似クラスは、 があります。 ちなみにCSSには順番も関係してくるので、上から順に「link→visited→hover→active」で書かなければ期待したようには動きません。 「:hover」でボタンを作ろう 「:hover」とその他の擬似クラスについてもある程度分かったところで、
CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CSS も冗長になって美しくありません。nth-child が全てを解決してくれます。例として以下を御覧ください。 りんご みかん ぶどう この2行目のみかんのみ文字色を変えたいという場合は css で nth-child を指定します。 ul li:nth-child(2){ color:#f00; } nth-child(2) でリストの2番目を指定するという意味になります。 前置きはこのくらいにして、ここからが本題です。このような便利な nth-child ですが、div 要素に nth-child を指定した時に詰まりました。 クラス名の違うdivが連なる場合 このよう
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イベントを安定させる方法
擬似クラスと擬似要素 - ウェブ開発を学ぶ | MDN
CSSの擬似クラス:checkedの使い方と効かない時の解決方法 | WATSUNBLOG
CSSの否定擬似クラスnotとは？一部の要素を除外する方法 | 侍エンジニアブログ
【CSS】:not否定擬似クラスの使い方とできること - bagelee（ベーグリー）
CSSの属性セレクタと否定擬似クラスを同時に使用するサンプル - Qiita
:user-valid、:user-invalid 擬似クラスでユーザーの操作の後に検証を行う
【CSS】きみは "擬似クラス" 何個言えるかな？？ - Qiita
擬似クラス！CSSでnth-of-typeを使う方法【初心者向け】現役エンジニアが解説
【CSS】擬似クラスを使いこなそう！:not()や:nth-child()の使い方 | 東京のホームページ制作 / WEB制作会社 BRISK
React*Material-UIのCreateStylesで擬似クラスを扱う - Qiita
【擬似クラス:target】CSSのみでハンバーガーメニューを作る - クモのようにコツコツと
擬似要素と擬似クラスの違いとは？ :before,:afterと::before,::afterのコロンの数はなぜ違う？ | WEMO
Next focusなどcssの擬似クラス - Qiita
csstest： CSS3 UI要素状態擬似クラス :disabled、:checkedの確認
「:not()」で複数のclassを指定するには 〜 擬似クラス[CSS]
ようやく全ての主要ブラウザで使用可能になるCSSの擬似クラス:hasを使ってみよう
【CSS】擬似要素と擬似クラスの違いの覚書 – niwaka-web
CSSのtarget擬似クラスでウィンドウの開閉アニメーションを実装する | Free Style
Inline stylesで擬似クラスが書ける! CSS Hooksが面白い
CSSの擬似クラス「:hover」の使い方｜簡単にボタンを作ろう | 侍エンジニアブログ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない