- 2020.09.01
- after,
CSS 「::after」の使い方
h1::after{ content: "←New!!!"; color: green; } h1タグで記述されているもののあとに、「←New!!!」を緑色で表示する。 参照したMDNリファレンス https://developer.mozilla.org/ja/docs/Web/CSS/::after 参考にしたYouTube
17/33ページ
- 2020.09.01
- not,
CSS 「:not」の使い方
article p:not(:first-of-type) { color: red; } articleタグ内、Pタグのうち、最初のもの以外を赤字にする。 「:not()」のかっこ内に除外したいものを入れます。 参考にしたYouTube
- 2020.09.01
- nth-of-type,
CSS 「:nth-of-type()」の使い方
article p:nth-of-type(3) { color: red; } articleタグの中にあるpタグのうち、3番目の文字を赤色にする。 ()内の数字を変えると、〇番目を変えられます。
- 2020.08.31
- first-child, first-of-type,
CSS 「:first-child」と「:first-of-type」の使い方
first-of-typeの方がよく使います。 :first-childの使い方 例 article :first-child { color: red } articleタグの一番最初の子要素について、文字を赤色にします （article直下で一番最初のh1が赤色になります） :first-of-typeの使い方 例 article p:first-of-type { color: […]
CSS aタグでhref属性が”.com”で終わるものだけ装飾する
a[href$=".com"] { color: red; } とコーディングすると、href属性が”.com”で終わるaタグのみ、文字色を赤にすることができます。 pointは、「$=」 参考にしたYouTube
CSS aタグでhref属性に”google”が含まれるものだけ装飾する
a[href*="google"] { color: red; } とコーディングすると、aタグでhref属性に”google”が含まれるものだけ文字色を赤にすることができます。 ポイントは「*」 参考にしたYouTube
CSS aタグでhref属性が”http://www”で始まるものだけ装飾する
a[href^="https://www"] { color: red; } とコーディングすると、aタグでhref属性が”http://www”で始まるものだけ文字色を赤にすることができます。 pointは「^=」 参考にしたYouTube
- 2020.08.14
aタグでhref=”https://google.com”となっているものにCSSを当てる
aタグでhref属性に特定の値を持っているものにだけCSSを当てることができます。 たとえば、 a[href="https://google.com"] { color: blueviolet; } とコーディングすると、 aタグでhref=”https://google.com”となっているものにだけCSSを当てることができます。 参考にしたYouTube
- 2020.08.14
CSS 特定の属性を持っているものだけにCSSを当てる方法
CSSでは特定の属性を持っているものにだけCSSを適用することができます。 たとえば、 a[href] { color: red; } とCSSを書くと、aタグでhref属性を持っているものだけ、CSS（文字色を赤）を当てることができます。 参照したYouTube
- 2020.08.13
2つのクラスがついているタグのみにCSSを適用する方法
2つのクラスがついているタグのみにCSSを当てることも可能です。 たとえば、 .title.big { background-color:pink; } この場合、titleとbigという2つのクラスが付されているところだけ、背景色をピンクにするCSSが適用されます。 index.html style.css ブラウザの表示 参考にしたYouTube