CSSの疑似要素を使いこなす!

 CSSの疑似要素を使いこなす!

今回は疑似要素についてふれていきます。前に書いた記事に関しても、途中で参考として載せているのででぜひ確認してみてください。

span[class^=”bar”]

classが“bar”のものだけ色を変える

:nth-child(n番目)

2番目の文字だけ色が変わるように:nth-child(2)にしている

下の文字はリストで作成しているが・を表示したくない場合は、list-style:none;を指定すると・がなくなる。

  • 2番目だけ
  • 文字の色が
  • 変わる

::first-letter

最初の文字だけ色をつける

::first-line

1行目の色が<br>
変わっていることがわかります。

:active

「クリックしている時だけ色が変わる」

:focus


↑クリック後、他のところをクリックすると色が元に戻る。

:hover

マウスカーソルを合わせると色が変わる

:hover :active :focus を使用し
CSSで動く :hover :active :focus の使い方
buttonに動きをつけてみました。

また、focusについて詳しくは書いていませんが
目次を作りたい!jsを使わず、項目にfocusさせる方法。
この記事で少しふれています。

記事を違うタブで開かせるために上記では <a href=”#” target=”_blank”> を使用しています。

:existと:disabledについて

inputタグにexistかdisabledを入れることにより、inputタグを有効また無効に設定することができる。また、placeholderを使うことにより、input内に文字を最初から入れることが可能となる。


:checked

1番目のラジオボタンには <input type=”radio” disabled>を入れています。



::before と ::after

マウスカーソルを合わせると…

疑似要素のBとAが出てきましたね!

とても便利なので、::before ::afterの使い方は覚えておきたいところです。
jQueryで要素を追加・変更
上記の記事では、jQueryを用いて Before After を使い要素の追加を行なっています。

いかがでしたか?よく使っているものからあまり使っていなかったもの等あったかと思います!便利だと思ったものだけまとめているので、ぜひ参考に使ってみてください。

カテゴリー: CSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です