擬似要素
::beforeで要素の前に任意の文字を追加で表示できます。
::afterで要素の後ろに任意の文字を追加で表示できます。
data-=””を使うと、HTMLに独自の属性がつけられて、擬似要素で使えます。
![](https://tumaboki.com/wp-content/uploads/2020/11/3cd0b3a577c143ae677ffc2d2bb834c5.png)
![](https://tumaboki.com/wp-content/uploads/2020/11/ab957743817a748342399fd6bd473202.png)
擬似クラス:hover
:hoverを使うと、マウスカーソルを当てた時の状態を設定できます。
![](https://tumaboki.com/wp-content/uploads/2020/11/fc71d17978bac34506adb05bb40c91c3.png)
![](https://tumaboki.com/wp-content/uploads/2020/11/f7a1d9415bafc2c63c5eecc7acea57ae.png)
擬似クラス:nth-child
nth-childを使うと、同じ要素の特定位置にスタイルをつけられます。
値に、数字とnを組み合わせると、一定間隔でスタイルをつけられます。
値に、oddを入れると、奇数番目にスタイルをつけられます。
値に、evenを入れると、偶数番目にスタイルをつけられます。
first-childを使うと、要素の最初にスタイルをつけられます。
last-childを使うと、要素の最後にスタイルをつけられます。
![](https://tumaboki.com/wp-content/uploads/2020/11/c24eccd5fbbf86cdd7e4ee7ae8f57e44-1024x457.png)
コメント