- Products -


Software


NEWS


Special



- Knowledge -


Category × Tag



- Like -

公開
作成日:2021/11/24
更新日:2022/3/15

【CSS】疑似クラスや疑似要素を使用して一括で要素を編集する方法

疑似クラスとは


・CSSでスタイルを設定する時に、「マウスが乗ったら」「既にクリックされたリンクであったら」という条件が指定できる。

・これを実現するために使用するものが疑似クラスである。

・疑似クラス一覧(公式)
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

疑似要素とは


・「文字の先頭だけ」といった指定は疑似クラスではできない。この指定をできるのが疑似要素である。

・また、「この要素の前に」「この要素の後に」要素を挿入するといったことも疑似要素を使って実現できる。

・疑似要素一覧(公式)
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

使い方



/* 疑似クラスでマウスポインタが乗った時にボタンの色を変更する例 */
button:hover {
  color: blue;
}

/* 疑似要素で先頭の文字サイズを拡大する例 */
p::first-letter {
  font-size: 130%;
}


参考


https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements


Category



Tag




関連記事


{{tmp.name}}

{{article.category}} {{article.title}}