- 2020.09.30
- 結合子,
CSS 結合子いろいろ
main * { color: red; } mainの中のすべての要素に適用 main h1 { color: red; } mainの下にあるh1すべてに適用 main article h1 { color: red; } mainの下にあるarticleの下のh1に適用 main > h1 { color: red; } main直下のh1にだ […]
はるとブログ プログラミング・AIイラスト・英語などについて情報発信しています
main * { color: red; } mainの中のすべての要素に適用 main h1 { color: red; } mainの下にあるh1すべてに適用 main article h1 { color: red; } mainの下にあるarticleの下のh1に適用 main > h1 { color: red; } main直下のh1にだ […]
p::first-letter { color: red; font-size: 24px; font-weight: bold; } pタグで記述されているものの最初の1文字だけ 字を赤色にする フォントサイズを24pxにする 太字にする 参考にしたYouTube
p::first-line { color: red; } pタグの1行目だけを赤色にする 参考にしたYouTube
h1::before{ content: "祝"; color: gold; } h1タグの前に「祝」という字を金色で入れる。 参考にしたYouTube
h1::after{ content: "←New!!!"; color: green; } h1タグで記述されているもののあとに、「←New!!!」を緑色で表示する。 参照したMDNリファレンス https://developer.mozilla.org/ja/docs/Web/CSS/::after 参考にしたYouTube
article p:not(:first-of-type) { color: red; } articleタグ内、Pタグのうち、最初のもの以外を赤字にする。 「:not()」のかっこ内に除外したいものを入れます。 参考にしたYouTube
article p:nth-of-type(3) { color: red; } articleタグの中にあるpタグのうち、3番目の文字を赤色にする。 ()内の数字を変えると、〇番目を変えられます。