CSSセレクタにおける、疑似クラスの併用
- 2018/6/22
- CSS
CSSでスタイルを記述していると、
ul要素内のliのうち、特定部分だけスタイルを適用したいという場面が多々あると思います。
そんな時はfirst-child、nth-child等で指定すればいいです。
ではさらにここに疑似クラス(before,after)を付与したいとなった時、どうすればいいか。
何も難しいことはなく、そのままnth-childの後ろに記述すれば大丈夫です。
例：
<ul>
<li>一番</li>
<li>二番</li>
<li>三番</li>
</ul>
二番目だけに疑似クラスを付与する場合は、
ul li:nth-child(2):before{
必要なスタイル
}
と書くだけです。
必ず子要素指定をしてから疑似クラス付与をするようにする点に注意してください。
是非、ご活用ください。
この著者の最新の記事
ピックアップ記事
-
2023/6/30
MayaとBlenderの競合についてMayaとBlenderは、映画やアニメーション制作の分野で広く使用されている競合するソフトウェア… -
2023/6/29
SEOとAIチャットボット：自動応答と検索エンジンの相互作用の最適化SEO（検索エンジン最適化）とAIチャットボットの組み合わせは、オンラインビジネスにおいて重要な役… -
2023/6/29
.htaccessファイルを活用したキャッシュ制御とパフォーマンスの最適化. htaccessファイルは、ウェブサイトのパフォーマンスとユーザーエクスペリエンスを向上させる… -
2023/6/29
.htaccessファイルを使ったIP制限とアクセス制御の方法. htaccessファイルは、ウェブサーバーで重要な役割を果たすファイルの一つです。 このファイ… -
SEO（検索エンジン最適化）は、オンラインビジネスの成功において非常に重要な要素です。 しかし、多…
