CSSの足し算の意味は？

質問

CSS内にあるプラス記号は何を意味しますか？
また、 >　記号なども不明です。

以下の様な記述を見つけたのですが意味が分かりません。

body > h2 + p { ・・・

ul li+li+li　｛・・・

こういった記述の意味を知っている方いらっしゃいましたら教えてください。

回答No.2

ORUKA1951 · ベストアンサー

CSS(カスケーディングスタイルシート)のもっとも特長は、カスケーディングですが多くのサイトの説明は、カスケーディングではなく、プロパティの説明ばかりですね。CSSの仕様書には、セレクタに続いて「値の割り当て、カスケード処理、継承」が記述されていて、媒体系やプロパティの説明はその後・・・。

スタイルシートの文法は、
セレクタ{宣言ブロック}となっていますが、本当に大事なのはセレクタ部分です。たとえば
div.section p{}とセレクタが書かれていれば、
div　　 -----タイプセレクタ(HTMLで言うところの要素) 詳細度[0,0,0,1]
.　　　 -----クラスセレクタ(HTMLのclassの値が半角スペースで区切られたリストになっている場合そのうちのひとつ) 詳細度[ 0,0,1,0 ]
section -----そのクラス名
　　　　------半角スペース 子孫セレクタ　出発点であるdiv.sectionの子々孫々のと言う意味
p　　　 -----タイプセレクタ 詳細度[0,0,0,1]
　合計で、詳細度は　[0,0,1,2]ですね。

　ここの子孫セレクタを示す半角スペースのように、いくつかの接続詞がありますが、
+ 隣接セレクタ　あるセレクタの次に登場するセレクタ
> 子供セレクタ　あるセレクタの直接の子供(子孫と異なり直接の子供)
[] 属性セレクタ
#　一意セレクタ
:　擬似要素と擬似クラス
　　:first-child'擬似クラス　　　　　　　　　　　　 詳細度[0,0,1,0]
　　リンクに関する擬似クラス: ':link'、':visited'　 詳細度[0,0,1,0]
　　動的な擬似クラス: ':hover'、':active'、':focus　詳細度[0,0,1,0]
　　言語に関する擬似クラス: ':lang'　　　　　　　　 詳細度[0,0,1,0]
　　擬似要素　　　　　　　　　　　　　　　　　　　　詳細度[0,0,0,1]

body>h2+p{
　bodyの子供であるh2の次のp
ul li+li+li{
　ulの子孫であるliのうち、その前にふたつ以上liが隣接してある場合

　プロパティを覚えるより先に、このセレクタとカスケーディング・継承をしっかり理解しておきましょう。無駄なHTMLを書く必要がなくなります。

★REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html#toc )
　なお、現在ウェブ標準とされているものは、CSS2.1ですが、いくつか変更があります。特に詳細度やカスケーディングについては重要な変更があります。しかし、良い邦訳を知りません。
★Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification ( http://www.w3.org/TR/CSS2/ )
　詳細度の計算で、HTML本体に書かれているスタイル属性の詳細度が[1,0,0,0]になりました。
　→変更点(CSS2.1 Appendix C 邦訳) ( http://www.d-toybox.com/spec/CSS2.1/appendixC/ )

　とりあえず面倒くさくても、仕様書を一通り目を通しておきましょう。色々検索して探し出すより正確で正しい知識が得られます。

お礼

有難う御座います。

非常に勉強になり、また認識も深まりました。

>>セレクタ{宣言ブロック}となっていますが、本当に大事なのはセレクタ部分です。たとえば

とても意味深いですね。

>>無駄なHTMLを書く必要がなくなります。

本当にそうですね。装飾でHTMLを変更するのはおかしな話で、CSS側で対応できるのであれば、その方がセンスが良いと感じます。

擬似クラス、擬似セレクタなど必要に応じて、率先して活用して深めて行きたいと思います。
非常に参考になりました、有難う御座います！

回答No.1

Gotthold

記号は検索エンジンで検索しにくいですね。

> が 子供セレクタで、
+ が 隣接セレクタです。

詳細はこのページを。
CSS 概説 | セレクタ
http://msugai.fc2web.com/web/CSS/selector.html

「CSS セレクタ」で検索すれば情報を見つけられます。

お礼

有難う御座います。
セレクタで調べて見たいと思います。