セレクタ

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

css / 2022年9月24日 / 、

これまでのcssは、先にある要素 → 後にある要素　の順番(親→子、兄→弟、隣)で詳細度を高めるしかありませんでした。 それを逆向きに指定できるようになったのがhasセレクタです。 chrome、safariではすでに対 […]

counter関数の使い方 [CSS]

css / 2022年4月23日 / 、、

cssのcounter変数を利用すると、指定の要素に任意のcounterを設定することができ、設定されたcounterはcontentで利用することができます。 早速具体例を見ていきます。 counter-resetでカ […]

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

css / 2022年4月23日 / 、

属性（attribute）を利用したCSSセレクタ。混乱してどれを使うかわからなくなることがあるので備忘録でまとめておきます。 属性セレクタとは 解説サイトなどでは[attr]や [attr = value]のような書き […]

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

css / 2022年4月23日 / 、

今回は、「兄弟関係にある」 n番目の要素を指定するセレクター「nth-child」のお話です。 初見でかるい気持ちで使用すると、css指定が効かなかったり、全然違う要素に効いたりするnth-childです。 「nth-o […]

cssで作るイメージギャラリー

css / 2022年1月6日 / 、、

htmlとcssしか自由に編集できない環境でLightBox風のイメージギャラリーを作りたい。となったとき、これまでは :target疑似クラスを使用していたのですが、input type=”radio&#8 […]

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

css / 2022年4月23日 / 、、

久しぶりにセレクタの話です。 「n番目の要素」や「ホバー時」など、要素を特定するイメージがあるcssセレクタですが、「○○以外」を対象とできる :not というセレクタがあります。 :notの働きはシンプルですが、知って […]

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

css / 2022年4月24日 / 、、、

今回はスムーススクロール(よく画面右下に登場するトップに戻るボタン。クリックすると、するするするっと上に戻っていくあれ)をCSSだけで実装してみたいと思います。 基本的にJavaScriptで実装した方が、スピード調節が […]

疑似要素before、afterの使い方

css / 2022年4月23日 / 、

CSSを学んでいると出てくる「擬似要素」。その名の通り、擬似的につくる要素です。私は雑なので呼び分けしないですが、マウスホバー時を指定する :hover や、n番目を指定するnth-child ・nth-of-type、 […]

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

css / 2022年4月24日 /

次第に見かけなくなりましたが、「+」や「~」などをCSSセレクタを見かけることがあると思います。 たとえば　#hoge + div　や、#hoge > div　のようなものです。 これら、「セレクタ + セレクタ」 […]