http://9-bb.com/css%E3%81%A0%E3%81%91%E3%81%A7%E …
上記のアドレスで、下記の説明がされています。
「今回は、ulの表示・非表示でアコーディオンの役目をさせていますが、divなど他のタグに変えても出来ます、+を利用して次に来るタグが対象になっています」
input[type="checkbox"].on-off:checked + ul{height: 200px;}
この様に記述すれば、「inputタグ」の次に来るタグ、すなわち「ulタグ」を、「+」によって操作できると言う説明です。
それでは、「次に来るタグ以外のタグ」は操作する方法はどうするのですか?
input[type="checkbox"].on-off:checked + .test ul{height: 200px;}
上記の様に記述すれば、<div class="test">~</div>を操作できますか?
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
変なサイトを見ないこと。
「+を利用して次に来るタグが対象になっています」違います。それも初歩的な嘘。
+ある要素に続く要素を示す隣接セレクタと呼ばれるものです。
タグはその要素を示すマークアップであって、要素自体を示すものではない。これはHTMLのようなマークアップ言語を扱うときの基本中の基本。
input[type="checkbox"].on-off:checked + ul{
HTMLが糞だからセレクタの書き方も糞になる。on-offなんてクラス名はつけないでしょう。classは、要素では文書構造が示しきれないときに、文書構造を補完するためにつける。
input[type="checkbox"].on-off:checked + .test ul{
CSS2以降は基点セレクタを書くこと。上記(.test)の様になくても、そこに全称セレクタが省略してあると判断して、*.testと解釈はしてくれるけど。
まず、CSS2.1の
5.セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
をマスターしましょう。
>上記の様に記述すれば、<div class="test">~</div>を操作できますか?
前後の文書構造が分からないので答える事は不可能です。
ただ、input要素は行内要素ですから、その直後にdiv要素が閉じられもせず繰ることはありえません。
form <form>
|-- p <p>
| |--input <input>
|--div </p>
<div>
<ul>
のはずですから、HTMLが正しければそのような書き方にはならないはずです。
もちろん、
input[type="checkbox"].on-off:checked + ul{
にもね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(ネットショッピング・通販・ECサイト) 骨伝導ヘッドセットで この二つは値段が違うだけでは同じですか? 1 2023/02/13 19:13
- マウス・キーボード Pc切替器が動作しません。理教えてください。よろしくお願いします。 4 2023/05/10 15:43
- 船舶・クルーズ Windows10のエクスプローラにて。 1 2022/10/10 20:11
- その他(パソコン・スマホ・電化製品) Google ドライブのようにXnBay ストレージ サーバのストレージスペースをコンピュータのエク 2 2023/04/28 19:09
- 政治 橋下徹氏「まずは国会議員から取り上げろ」……この人、たまに良いこと言いますね? 5 2023/01/07 15:14
- その他(芸術・クラフト) 木製の試験管立てを探しています。 2 2022/10/07 21:28
- ノートパソコン なんでこんなに安いんですか?大丈夫? 6 2023/04/21 22:28
- FX・外国為替取引 トラッキングトレードなどFX自動売買の対策 壱 2 2023/05/13 07:13
- 工学 都市ガスの燃焼速度 3 2022/08/03 12:59
- Photoshop(フォトショップ) 写真に日付を入れるのがそんなに大変か 9 2023/07/22 14:38
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
1から100までの自然数のうち、2...
-
超音波で洗脳。
-
CSSのセレクタに指定するbodyと...
-
smallにtext-allignが効かない
-
「諸要素」とはどういう意味で...
-
【ヒトの神秘】美男美女から何...
-
aの中にspan
-
リンク付き画像を右よりに表示...
-
aタグ 中央寄せ
-
cssで好きな位置に好きなボック...
-
<div>でレイアウトすると上下に...
-
html5で右揃え、方法は?
-
初歩的な質問です。<div>のwidt...
-
あるタグが反応しません...
-
HTMLで <p>~</p>内で2回以...
-
border: noneでボタンの境界線...
-
<object>
-
<br />と<br>は同じ意味ですか?
-
Bootstrap レスポンシブ textarea
-
imgタグをそのまま使うことは正...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【ヒトの神秘】美男美女から何...
-
超音波で洗脳。
-
質問1.
-
smallにtext-allignが効かない
-
含む含まないという概念自体の...
-
NからZへの全単射を具体的に構...
-
角丸画像の背景色を透明にした...
-
タグは大文字と小文字どちらが...
-
改行ほどは行かないけど、若干...
-
2個のFormを横並びにしたい
-
「諸要素」とはどういう意味で...
-
input type="hidden"で取得した...
-
CSS:overflow要素の印刷について
-
textareaの幅を画面と合わせたい
-
親要素・子要素
-
テキストボックスの中にリンク...
-
emとstrongの反対
-
cssのdisplay:block
-
border: noneでボタンの境界線...
-
tdに対してmin-heightの定義、...
おすすめ情報