セレクタ

counter関数の使い方 [CSS]

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

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

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

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

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

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

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

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

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

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

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

疑似要素before、afterの使い方

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

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

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