ＣSSの適用範囲

CSSの適用範囲

h2｛｝
登場するすべてのh２要素に適用、適用された要素以下の要素にも適用される。
特定の要素を指定するためには、条件を組み合わせる

article　ｐ｛｝
article以下のｐ要素に適用、子、孫、ひ孫要素すべてに有効

article　>　ｐ｛｝　
articleの直下、親子の関係でのみ有効

ドット＋クラス名　.test
クラスは、ページ内複数個所に使える

ハッシュ＋ID名 #test
1ページで1か所にのみ適用

要素[属性値]　input[type=”text”]
フォームで主に使われる

.test{}

.testクラスが付いている所すべてに適用される

.test p {}　

testクラスが付いている要素の中のｐ要素に適用される。

header .test p

ヘッダー要素以下でtest要素が適用されている要素の中のｐ要素

.main .test>p img

mainクラスが適用されている要素以下で、test要素が適用されている要素の
直下にあるｐ要素の中にあるimg要素に適用する

カンマで区切ることで、複数の要素に適用できる

header,
main div,
footer{}

headerと、meinの中のdivと、footerに指定した条件が適用される

.fig::after

figクラスが適用されている要素の中身の後ろに疑似的に入れ物を作る
文字の前後に画像を配置して装飾する場合等に使う

こんにちは■
■が画像で、疑似要素になる。
::beforにすると、要素の前に置ける

img:hover　

この場合img要素がマウスーバーされているときに適用される条件。
特定の条件を付与して、違う設定を与えることができる。