セレクタの書き方 - programming-notes

セレクタの書き方

p {color: orange;} のようにタグ名をそのまま書く。全てのタグに対してCSSを適用することができる。

#headline {color: orange;} のようにid名を書く。id=" "で指定された部分について、#id名 {} でcssが適用される。

class=" "で指定された部分について、.class名 {} でcssが適用される。

否定セレクタ　:not()

〇:not(★) {〜}

★に適用しないものを書く。★を除いて〇にcssを適用する。

:last-child などと組み合わせると

N番目の要素（タグ要素）にだけ適用

最初の要素 ◯: first-child {}

最後の要素 ◯: last-child {}

N番目の要素〇: nth-child(N) {}

カンマ区切りで複数のセレクタを書く ~~,~~,~~ {}

全要素に対して適用 * {}

◯ * {} 〇の全要素に対して適用する

◯ + ◯ {}

同じ階層のすぐ隣（後ろ）の要素にのみCSSが適用される

◯ > ◯ {}

1つ下の階層の子要素にのみCSSが適用される

◯ ~ ◯ {}

同じ階層の後につづく要素全てに適用される

絞り込み指定

半角スペースで区切って、要素の大きい順に並べる。

〇〇の中は、id名でもclass名でもタグ名でもよい。

例　.main p span {}

次のhtmlテキストに対して、mainクラス内の p 内にある span に css が適用される。

code:sample.html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<h2>これは見出しです</h2>

<p>

これは<span class="light">例</span>

</p>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~