CSS セレクタのいろいろ 複合

ここでは、特定の子要素のみや隣接する要素等組み合わせによる指定方法を紹介したいと思います。

子孫要素の全ての要素に適用するセレクタ

子孫要素の全ての要素に同じスタイルを定義するには、セレクタの間をスペースで区切ります。

p em {
    color:blue
}

結果

CSS2では、新しく色に'orange'を追加した。また、displayプロパティの値に'inline-block'も追加されました

孫要素以降の子孫要素に適用するセレクタ

孫要素以降の子孫要素に適用するには「*」を組み合わせて指定します。 

ol * li {
    color:blue
}

結果

  1. E
  2. A
    • メジャーペンタトニック
    • マイナーペンタトニック
  3. C

子要素のみに適用するセレクタ

子要素のみを指定したい場合、「>」記号を組み合わせて指定します。

p > eml {color:blue}

結果

CSS2では、新しく色に'orange'を追加した。また、displayプロパティの値に'inline-block'も追加されました

Internet Explorer Ver.6.02900.2180時点では、対応していないようです。

隣り合うセレクタに適用するセレクタ

あるセレクタの直後に現れるセレクタに適用したい場合、セレクタを「+」でつなぎます。

p + em {color:blue}

CSS2では、新しく色に'orange'を追加した。また、displayプロパティの値に'inline-block'も追加されました
  • Internet Explorer Ver.6.02900.2180時点では、対応していないようです。
  • FireFox 1.04では、対応していないようです。
  • Opera 8.0では、対応していないようです。