CSSセレクタ（結合子、疑似クラス、疑似要素）

CSSセレクタ（結合子、疑似クラス、疑似要素）


CSSセレクタのうち、

  • 結合子（ + ~ > など )
  • 疑似要素（ ::before ::after　::first-letter など）
  • 疑似クラス( :hover、:focus、:checked :nth-child :not :targetなどなど)

に言及している記事をまとめています。

このサイトではあまりCSSセレクタについて書いていませんが、疑似要素、疑似クラスは全部で40種類以上あるらしいので、興味のある方はMDNなどで調べてみてください。

css

否定擬似クラス、:not()の詳細度

まれに疑似クラス:not()が予想とちがう振る舞い（効いてほしくないところに効く）をすることがあったので、cssの詳細度についてきちんと調べ直しました。 ...
2023.01.25
css
css

兄弟要素をもたない要素を指定する疑似クラス、:only-child

タイトルの通りです。 :only-child疑似クラスを使用すると、兄弟要素を持たない要素を指定することができます。 個人的にはリスト（ul, o...
2022.11.21
css
css

Firefoxブラウザで:hasセレクタを試す方法

「画期的な発明、hasセレクタ」でご紹介した新しいCSSセレクタである「:has()」ですが、今のところFirefoxが対応していません。 その...
2022.11.08
css
スポンサーリンク
css

画期的な発明、:hasセレクタ

これまでのcssは、先にある要素 → 後にある要素　の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようにな...
2022.09.24
css
css

cssセレクタ「+」「>」「~」の意味と使い分け

div > imgやdiv + pのように、+ > ~ で接続したcssセレクタを見かけることがあります。これらはcssの適用範囲を限定するセレクタの使い方です。それぞれの違いと使い方を解説します。
2022.04.24
css
css

CSSでトップに戻るボタンを作る

smooth-scrollプロパティを使って、CSSだけでトップに戻るボタンを作ることにします。ぺーじ内リンクのズレは:targetセレクタで修正するのが最も楽だと思います。
2022.04.24
css
css

○○以外を指定する :notセレクタ

久しぶりにセレクタの話です。 「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる ...
2022.04.23
css
css

CSSで三角の吹き出しを作る方法

cssで吹き出しの三角を作る方法について３種類説明します。
2022.04.23
css
css

counter関数の使い方 [CSS]

cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することが...
2022.04.23
css
css

CSS　属性セレクターの備忘録

属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。 属性セレ...
2022.04.23
css
css

疑似要素before、afterの使い方

疑似要素before afterの基本の使い方と働き方、３つ以上の疑似要素をつなげて使う方法などを解説します
2022.04.23
css
css

疑似クラス　nth-child　の使い方いろいろ

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効か...
2022.04.23
css
次のページ
タイトルとURLをコピーしました