- ベストアンサー
なぜこのCSSはaタグに適用されないのか
- 要素名.クラス名で指定した「要素以下の指定クラス」が適用されないため、aタグにcls1クラスが適用されません。
- 正しく適用するためには、div.cls1と指定する必要があります。
- 記述方法を間違えている可能性があるため、確認する必要があります。
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
divの次に半角が「有る/無い」で意味が違う・・・ 半角が有る ＝ 「～の中の」って意味 半角が無い ＝ 「～の」って意味 div.cls1 { } この場合のHTMLは、 <div class="cls1"><a href="www.google.co.jp">google</a></div> の場合にcls1のdivをどうするかって話。 div .cls1 { } この場合のHTMLは、 <div><a class="cls1" href="www.google.co.jp">google</a></div> の場合に、cls1のaをどうするかって話。 div.cls1 a{ } この場合のHTMLは、 <div class="cls1"><a href="www.google.co.jp">google</a></div> の場合に、cls1のdivの中のaをどうするかって話。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
セレクタの書き方を復習しましょう。 プロパティなんかより先に覚えないと、a要素にいちいちidを振るなんて酷いものになりますよ。 .はクラスセレクタですが、それより前に覚えなきゃならないのは 全称セレクタ タイプセレクタ 子孫セレクタ 兄弟セレクタ 属性セレクタ 属性セレクタの一種であるクラスセレクタ 一意セレクタ 擬似クラスセレクタ 擬似要素セレクタ の順番で学ぶほうが良いです。 div.cls1は、class要素の半角スペースで区切られた値のリストのひとつにcls1の値を持つdiv要素と言う意味ですから <div class="cls1">や<div class="cls1 top">などにマッチします。 あなたの書かれたHTMLに該当するものはありません。 もし適用させようとしたら div .cls1{}と子孫セレクタ(半角スペース)を使うことになりますが、CSS2の書き方としてはお勧めしません。 CSS2以降は、タイプセレクタに続いてつなげるセレクタを書くことになりました。そのために詳細度0の*全称セレクタが追加されました。 すなわち div a.cls1{} 詳細度 [0,0,1,2] divの子孫であるa要素のうちcls1クラスに属するもの div *.cls1{} 詳細度 [0,0,1,1] divの子孫であるすべての要素のうちcls1クラスに属するもの になります。div .cls1{}はdiv *.cls1{}とみなすと言うことです。 細かく言えば--とっても大事なことなのですが-- DIVの使い方が間違っています。 『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。』ですから、デザインのためではなく、あくまで他に適切な要素がないときにやむを得ず使い、classやidで文書構造を保管するのです。 ここは文書のヘッダですよという要素がないために、 <div class="header"> <h1>タイトル</h1> <p class="goTop"><a href="/">トップへ</a></p> </div> のようにね。これで誰が見ても何がどういう意味で書かれているか分かる。十年後に見ても。 その上でスタイルシートで div.header p.goTop{width: 200px;height: 100px;margin:5px auto;} div.header p.goTop a{display:block;width:100%;height:100%;border:outset 3px blue;text-decoration:none;background-color:aqua;} div.header p.goTop a:active{border-style:inset;} とすれば良いのです。スタイルシートを見ただけでHTML開かなくても、header内のgoTopクラスの段落は、200px幅で100px高さのブロックで中央。その中のa要素はそのサイズに合わせて指定されている・・・とね。 いずれにしても ⇒5. セレクタ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) ⇒6. 値の割り当て、カスケード処理、継承( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) を読んでおきましょう。 なお、 <a href="www.google.co.jp">google</a> に対して a[href="www.google.co.jp"]{color:red;font-size:2em;display:block;width:200px;height:100px;} とかもかけることはかけるのですよ。要素セレクタ まあ、div.cls1と半角スペースが抜けているが答えではありますが・・・ Make a little space king and and,and and and queen.→kingandand
お礼
ご回答ありがとうございます。 そういう事なんですね。やり方を少し勘違いしていたようです。