- ベストアンサー
CSSセレクタの子孫要素について意味を質問します
CSSセレクタや、JQueryのセレクタで E F の意味は、 「Eの子孫要素にあたるＦに、スタイルシートを適用する。」 などと、よくサイトなどで記載があります。 使い方は理解しているのですが、 これって「子要素と孫要素」だけではなく、 「下の階層にある要素全て」が正しいと思っています。 （要は、ひ孫要素以下にもスタイルシートが適用されますよね？ってことです） それとも、「子孫要素」って下の階層全部のことを意味しているんでしょうか？ それはそれで、漢字の意味に疑問を持ちますが・・・ 自分が他の人に教える時に、しっくりこないので質問してみました。
- triplane26
- お礼率81% (13/16)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
>これって「子要素と孫要素」だけではなく、 >「下の階層にある要素全て」が正しいと思っています。 >（要は、ひ孫要素以下にもスタイルシートが適用されますよね？ってことです） 正しいです。 子要素のみでしたら E>F となりますし、子+孫でしたら E>F,E>*>F となります。 >それとも、「子孫要素」って下の階層全部のことを意味しているんでしょうか？ >それはそれで、漢字の意味に疑問を持ちますが・・・ しそん要素なので、下の階層ぜーんぶを意味します。 漢字の意味？まさか、こまご要素と読んでます？？？？ 私にはちょっと、新鮮な読みです。
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
子孫とは、子や孫だけじゃないですよ。 「フィギュアスケートの織田信成選手は織田信長の子孫です。」 とね。
お礼
ありがとうございます。
関連するQ&A
- CSSのセレクタに指定するbodyと*の違い
CSSでhead要素にstyle要素を記述する際、セレクタにbodyを指定しても*を指定してもすべての要素に適用されますが、違いがあるのでしょうか、教えてください。
- ベストアンサー
- HTML
- CSSセレクタについて
X要素の子要素としてY要素を持っている場合に、X要素にスタイルを適用するためのセレクタはあるでしょうか？ 自分で調べた限りでは上記と同等のことができる記述は見つかりませんでした。 もし、ご存知でしたらよろしくおねがいします。 JavaScriptを使えば出来るめどはあるのでスクリプト使わない方法で純粋にCSSのみを使った方法があればお願いします。 ※冒頭の条件（X要素の子要素としてY要素を持っている場合）は以下の3点の記述ミスではないのでその点もお願いします。 ・X要素の親要素としてY要素を持っている場合 ・Y要素の子要素としてX要素を持っている場合 ・X要素の属性としてY属性を持っている場合
- 締切済み
- CSS
- CSS：全称セレクタの使用について
CSSのスタイルの適用対象で、全ての範囲に適用される「*」ですが、分からないところがあります。 例：HTML <h3>よく使う<em>セレクタ</em>の中で<i>最もよく使う<em>セレクタ</em></i></h3> 例1：CSS * { color: red;} 例1の場合、全ての要素が対象となり、<h3>～</h3>内の全てが赤くなります。これは分かります。 例2： h3 * { color: red;} 例2の場合、h3要素内の子要素に対して全て適用対象となるので、直接h3要素内にある、「よく使う」と「の中で」以外は全て赤になります。これも理解できます。 例3： h3 * em { color: red;} これが理解しづらいのですが、適用範囲は「h3内にある全ての子要素内のem要素」という解釈でよいのでしょうか？ 回答よろしくお願いします。
- ベストアンサー
- HTML
- セレクタの指定について質問です
セレクタの指定について質問です JavaScriptを独学で勉強中です。 いつも動くようにできるのですが、他にもっといい方法があるんじゃないかと悩みます。。 動くんだったらいいじゃないかと言われるんですが、初歩的なことほど、ホントにこれでいいのかなぁと考えてしまいますので、質問させてください。 初歩中の初歩なんですが、セレクタの指定に変数を使用してもいいんでしょうか？ こんな感じです。 var char_id = 'span#' + character.toLowerCase(); $(char_id).addClass('down'); jQueryを使用してKeyCodeに対応した文字の色を変えるプログラムを作成しています。 IE8で確認したところ、期待通りに動くんですが、こんな書き方でいいんでしょうか？ また、他にこんなやり方もある場合は教えてください。 よろしくお願いします。 <html> <head> <style type="text/css"> <!-- .down{ background: #f00; color: #fff; border: 1px solid #f9f9f9; } --> </style> </head> <body> <span id="a">a</span> <span id="b">b</span> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> <!-- $(function(){ $(document).keydown(function(e){ $('span').removeClass('down'); if (e.which == 65 || e.which == 66) { var character = String.fromCharCode(e.which); var char_id = 'span#' + character.toLowerCase(); $(char_id).addClass('down'); } }); }); // --> </script> </body> </html>
- ベストアンサー
- JavaScript
- jQuery 子孫セレクタがうまくいかない
最近jQueryを勉強しはじめた者です。勉強していく中で、 疑問が生じたので、質問させていただきます。 jQueryの子孫セレクタが意図したとおりに動きません。 具体的には ： $(function(){ $("p strong").remove(); }); ： <p><em><strong>削除される</strong>abcdefg</em></p> <p><div><strong>削除されるはず</strong>abcdefg</div></p> ： と記述した時、 <strong>削除されるはず</strong> の部分が削除されません。 <strong>削除される</strong> の部分は削除されます。 以下のときは、2つとも削除されます。 ： $(function(){ $("li strong").remove(); }); ： <ol> <li><em><strong>削除される</strong>abcdefg</em></li> <li><div><strong>削除されるはず</strong>abcdefg</div></li> </ol> ： 私は、どの場合であっても削除されると考えていました。 ブロックレベル要素とインライン要素が関係していそうな感じはするのですが、 なぜ、このようになるか理由がわかりません。 よろしくお願い申し上げます。
- 締切済み
- JavaScript
- 【CSS】div や span でクラスやIDを使わない
簡潔に質問させていただきます。 div や span でスタイルを適用する際、 不要であればクラスやIDを省くことは文法として間違っていますか？ 要は、<div>テキスト</div> <span>テキスト</div> これだけです。 (スタイルは親要素＆セレクタで指定しています) 単なる要素として考えれば問題ないと思いますが、 そもそも単体では意味の無い要素なのでどうなのでしょうか。 尚、ブラウザ(IEとFireFox)では問題なく適用されてました。 色々情報を検索しましたが良い結果が得られませんでしたので、 ご存知の方、ご教授お願いいたします。
- ベストアンサー
- HTML
- スタイルシートのリンク要素について
スタイルシート。特定のIDセレクタにa要素を指定する方法を教えて下さい。 a:link{color:#FFFFFF} この場合はスタイルシートを適用すればページすべてに反映。 li a:link{color:#FFFFFF} これなら＜li＞にのみ適用ですよね？ そこでたとえば #abcd というIDにのみa:linkを適用させる場合はどのようにしたらよいのでしょうか？
- ベストアンサー
- HTML
- CSSの優先順位に関して
CSSで『後で書かれたものより、より厳密な条件に一致するセレクタによる指定が優先される』という規則は確実ですか？ 例えば .hoge.fuga{color:#00F} .fuga{color:#F00} という順番でスタイル指定されていたとしても、 class="huge fuga" の要素は確実に赤ではなく青になるんでしょうか？
- ベストアンサー
- HTML
- CSSを適用…させない！
ちは！ さてさて～スタイルシートで、たとえばページ内のtableすべてにスタイルシートを適用させるため書くのは TABLE{ うんぬん } ですが！この状態で、ページ内の数個のtableにはこの「うんぬん」を適用させたくない！ だからって、適用させたいtableにclassを設定しテクノは面倒だ！ そこで！、適用させたくない数個のtableに、「TABLE」に対してのstyleは適用させない！っていうclassを書く。 そんなCSSありますか？(わかりにく・・・い・・・) とりあえず、「ここは適用しなくていいよ」っていうCSSありませんかね？探してもないものはないんでしょうか・・・
- ベストアンサー
- CSS
お礼
ありがとうございます。 おっしゃる通りでした。 だいぶ恥ずかしいです。 でも、すっきりしました