要素の子孫（子要素およびその中の全ての要素）に対して、テキストカラーを赤に設定します。

  div * {
    color: red;
  }

ユニバーサルセレクタは他のセレクタと組み合わせて使うこともできます。
子孫セレクタとして:この例では、全ての <ul> 内の要素に対して、テキストカラーを青に設定します。

  ul * {
    color: blue;
  }

後続のセレクタとして:この例では、リストアイテム (<li>) 内の任意の要素 (*) を持つリンク (<a>) に対して、緑色 (color: green;) を適用します。

    li * a {
      color: green;
    }

アスタリスクはすべての要素が対象のセレクタで、Webページ全体に適用されるCSSを記述したい際などに便利です。参考サイト
「>」は、指定した要素の直下にある要素にスタイルを適用します> * >とは

　--　cssの優先順位マナブ　--

Link4

-- codeを見る--

  =html=
  <p>
    <ul>
      <li><a href="/">Link1</a></li>
      <li><span><a href="/">Link2</a></span></li>
      <li><span><div><a href="/">Link3</a></div></span></li>
    </ul>
    <a href="/">Link4</a>
  </p>

=css=

<style>
 a{
  color:red;/* Link4 */
}
li a{
  color:blue;/* Link1 */
}
li * a{
  color:green;/* Link3 */
}
 li > * > a{
  color:black;/* Link2 */
   font-weight:bold;
}
</style>

CSSセレクターの説明

1 a:

a {
  color: red;  /* Link4 */
}

全てのリンク要素 (<a>) に対して赤色 (color: red;) を適用します。この場合、Link4に適用されます。

2 li a:

li a {
  color: blue; /* Link1 */
}

親要素がリストアイテム (<li>) のリンク (<a>) に対して青色 (color: blue;) を適用します。この場合、Link1に適用されます。

3 li * a:

li * a {
  color: green; /* Link3 */
}

リストアイテム (<li>) 内の任意の要素 (*) を持つリンク (<a>) に対して緑色 (color: green;) を適用します。この場合、Link3に適用されます。

4 li > * > a:

li > * > a {
  color: black;     /* Link2 */
  font-weight: bold;
}

リストアイテム (⋖li>) の直下の任意の要素 (*) 内にあるリンク (⋖a>) に対して黒色 (color: black;) と太字 (font-weight: bold;) を適用します。この場合、Link2に適用されます。

  結果
Link1: 親要素が <li> なので、青色 (color: blue;) になります。
Link2: 親要素が <li> で、その子要素 (<span>) の子要素 (<a>) なので、黒色 (color: black;) と太字 (font-weight: bold;) になります。
Link3: 親要素が <li> で、その子要素 (<span>) のさらに子要素 (<div>) の子要素 (<a>) なので、緑色 (color: green;) になります。
Link4: 親要素が <li> ではないので、最初のセレクター (a) により赤色 (color: red;) になります。

事例

HTML・CSSの小技メモ -項目-

リンクする方法

追加記事

追加記事ここまで

＜a href="この部分のコード"＞書き方

インラインフレーム

1 地図

2 文字ファイル

3 地図やり方

4 解説

CSSで *（アスタリスク）

CSSでセレクタの「*（アスタリスク）」の意味は？

使用例

CSSセレクターの説明