スタイルシートのセレクターについて

質問

御世話になります。
ネットからダウンロードした、オブジェクト指向PHPの教本の中に、下に挙げるスタイルの記述があります。これはGoogleなどで検索した時に使われているようなページナビゲイターを作ろうとしている部分でのスタイルの記述すが、最初の　" .navigator a " というセレクターの意味がわかりません。

.navigator a, span.inactive{
margin-left:0px;
border-top:1px solid #999999;
border-left:1px solid #999999;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
padding: 0px 5px 2px 5px;
}
コンマの後の　"span.inactive" は inactive というクラス名を持った<span> エレメントだとわかりますが、" .navigator a "は navigator というクラス名を持った<a> エレメントではないですよね？　
W3School の CSS レファランスなども調べましたが, クラス名の後にスペースがあって、その後に<a> エレメントがあるような組み合わせはみつけられませんでした。
このセレクターの意味を教えていただきたく、よろしくお願いいたします。

回答No.2

AsarKingChang · ベストアンサー

>そうですか、"tag-name.class-name" という書式は知っていましたが、".class-name tag-name" というを初めて知りました。

一種のワイルドカードだと思えばいいです。
".class-name"だと、どのタグにも使用できる
"div.class-name"だと、DIVタグでだけ使用できる
"div"だと、DIVタグ全部に適応

>これは　"a.navigator" というのとは意味が異なるのですよね。
この書き方だと、aタグ内のclass=navigatorに対応ですね。

あと、その件を検証するHTMLを表示しておきました。
ただし、質問者さんが思った通りの結果なので、
特に説明は不要でしょうけど。

お礼

とても分かりやすい説明を頂き、有難うございます。
CSSについてはほんの基本的な部分を勉強しただけで、PHPのコーディングに力を入れていましたが、これからはもっとCSSをしっかりやっていこうと思いました。

回答No.1

AsarKingChang

あってますよ。
.navigator a,
span.inactive
{
なので、class=navigator内のaタグで会ってます。
それと、spanタグ内のclass=inactiveの2つを宣言してます。
書いてるが、「使ってないだけ」ってこともあるので、
心配なら、、、

div.abc span {
color:red;
}
<div class=abc>
<span>aaaa</span>
</div>
などを試してみてもいいかもです。
ただ、アンカータグ"a"は少し特殊なので、
普通のタグと使えるCSSが違うときはありますがね。

お礼

毎度、早々とご回答を頂き、有難うございます。
そうですか、"tag-name.class-name" という書式は知っていましたが、".class-name tag-name" というを初めて知りました。
これは　"a.navigator" というのとは意味が異なるのですよね。この navigator というクラス名は、<a> タグの親である<div> に付けられたクラス名なので、　".navigator a" は「naviggator というクラス名を持つ要素の中にある<a>エレメント」と考えて良いのですね。
ご確認いただけると有難いです。