CSSの+とか>とか

備忘録

デモ(JSFiddle)

'>'の意味

以下の要素を表す。

.japanese > ul {
  list-style-type: none;
}

上記のCSSが適応される範囲は
japaneseクラス以下のulタグのみ

<div class="japanese">
  <ul>
    <li>いち</li>
    <li>にい</li>
    <li>さん</li>
  </ul>
</div>

<div class="english">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

<ul>
  <li>Un</li>
  <li>deux</li>
  <li>trois</li>
</ul>

+の意味

隣接している要素を表す。

.english + ul {
  list-style-type: none;
}

上記のCSSが適応される範囲は
englishクラスの同階層かつ直下にあるulタグのみ

<div class="english">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

<ul>
  <li>Un</li>
  <li>deux</li>
  <li>trois</li>
</ul>

参考

weboook.blog22.fc2.com