CSSコレクタチェックポイント

6595 ワード
CSS publishing html テキストリンク

🍫 #id.class(「AND」オプション)

<span id="label" class="center">...</span>
  • ・#label.center {...}:idをラベルとし、クラス中心の要素も同時に選択可能

    • 🍫 子孫選択者:スペース

  • body div {...}:divタグを選択

    • 🍫 サブセレクタ:>

  • body > div {...}:bodyタグのサブエレメントの中からdivタグ(子孫ではない)を選択

    • 🍫 隣接する兄弟セレクタ:+

  • A + B {...}:AとBが同一階層の場合(兄弟要素の場合)Aに隣接するB選択
    • 例
    <body>
  <h1>미국 주식</h1>
  <h2>애플</h2>
  <h2>테슬라</h2>
  <h2>아마존</h2>
</body>

<style>
  h1 + h2 {
    color : red;
  }
</style>
    結果

    🍫 一般兄弟選択者:~

  • A + B {...}:AとBが同一階層の場合(兄弟要素の場合)Aに隣接するB選択
    • 例
    <body>
  <h1>미국 주식</h1>
  <h2>애플</h2>
  <h2>테슬라</h2>
  <h2>아마존</h2>
</body>

<style>
  h1 ~ h2 {
    color : red;
  }
</style>
    結果

    🍫 属性セレクタ：[]

  • 角括弧間の属性選択方法a[href] {...}:a href属性を持つ全てのエンティティを選択p[id="only"] {...}:pエンティティにidがonly属性を持つすべてのエンティティ選択

    • 🍫 仮想セレクタfirst-child

    p:first-child {...}:pセグメントで、最初のすべてのサブセグメントを選択

    🍫 仮想セレクタfirst-of-type

    p:first-of-typ {...}:p段兄弟段の最初のp段を選択
    (first-childとは異なり、最初に現れるpではなく、最初のサブエレメントを選択します)

    🍫 nth-last-child(n)

  • nth-childは同じだが順序が逆の差

    • 🍫 否定セレクタ

    p:not(#only) {...}:pレイヤーのうち、idがonlyのレイヤー以外は全て選択

    🍫 コンシステンシ確認コレクタ

    input[type="text"]:valid {...}:inputにテキストタイプを入力した場合、有効と判断し、該当するcssスタイルを適用するinput[type="text"]:invalid {...}:inputにテキストタイプを入力した場合は無効と判断し、対応するcssスタイルを適用する
    レポートの一括印刷要件の実現方法
    Box Model