ベストアンサー

CSSセレクタの記述について

2012/03/29 16:32

あるCSSのサンプルの内容で分からない部分があり、質問させてもらいました。 .sf-menu li:hover ul, .sf-menu li.sfHover ul { 　……… } JQueryを利用したドロップダウンメニューのコードなのですが最初の1行目にある擬似クラスの部分が良く分かりません。これは.sf-menuを適用したliタグ内にあるマウスオーバー状態のulタグについて適用するということになるのでしょうか。疑似クラスについて調べたのですが、擬似クラスの後にタグが続くサンプルを見つけることが出来ず、行き詰ってしまいました。ご回答いただけますと助かります。

trotrotron
お礼率32% (36/111)

CSS
回答数1
ありがとう数0

回答全件

ベストアンサー

「.sf-menu li:hover ul」の意味は、 .sf-men…

2012/03/29 19:39

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

lilillllililili
ベストアンサー率71% (23/32)

2012/03/29 19:39 回答No.1

「.sf-menu li:hover ul」の意味は、 .sf-menuの中のli要素に触れた時の中のul要素です。つまり <div class="sf-menu"> <ul> <li> ← これに触れた時の <ul></ul> ←これのスタイル　を指定します。 </li> </ul> </div>

全文を見る

ログインすると、全ての回答が全文表示されます。

関連するQ&A

cssを使ったロールオーバについて　どちらの記述が良いでしょうか？
cssを使ったロールオーバについて　どちらの記述が良いでしょうか？ cssでのロールオーバを使いたく、以下のようなタグに辿りつきました。 ---------------------------------------------------------------------- ul.menu { margin:0px 0px 25px 0px; padding:0px; clear:both; float:left; width:200px;} ul.menu li {float:left; width:100px; display:inline; text-indent:-9999px; overflow:hidden; ist-style:none;} ul.menu li a {display:block; width:100px; height:50px;} li.menu1 a {background:url(image/menu.gif) 0 0 no-repeat;} li.menu1 a:hover {background:url(image/menu.gif) 0 -50px no-repeat;} li.menu2 a {background:url(image/menu.gif) -100px 0 no-repeat;} li.menu2 a:hover {background:url(image/menu.gif) -100px -50px no-repeat;} <ul class="menu"> <li class="menu1"><a href="a.html" title="a">a</a></li> <li class="menu2"><a href="b.html" title="b">b</a></li> </ul> ---------------------------------------------------------------------- 表示はそれで上手く行ったのですが、overflow:hidden;を使うとIE7でスクロールバーが出ないんじゃないか？と言われ、下記のように書き直しました。 ---------------------------------------------------------------------- #menu { width:200px; height:50px; margin : 0px 0px 25px 0px ; } #menu h2 {width:100px; height:50px; margin:0; float:left;} #menu h2 a {display:block; width:100px; height:50px; background-image:url(image/menu.gif) ;} a.menu1 { background-position: 0 0 ;} a:hover.menu1 { background-position: 0 -50px ;} a.menu2 { background-position: -100px 0 ;} a:hover.menu2 { background-position: -100px -50px;} <div id="navi"> <h2><a href="a.html" class="menu1" title="a"></a></h2> <h2><a href="b.html" class="menu2" title="b"></a></h2> </div> -------------------------------------------------------- こちらでも表示は出来たのですが、後からIE7で確認した所初めのタグでもスクロールバーは表示出来ました。とはいえやはり不安ですし後者で行こうかと思ったのですが、後者の場合も<a></a>の間に何もないことが気にかかり決めかねています。詳しい方がいらっしゃいましたら、どっちの方がいいかのアドバイス等頂けないでしょうか。よろしくお願いします。
- ベストアンサー
- HTML
「>」を使った記述はCSS3からのもの？
とあるサンプルサイトのCSSを見たところ、 #global-nav > ul > li:first-child a { border-radius:6px 0 0 0; } というCSS3の角丸設定のものがありました。一番最初にあるリンクが貼られているli要素に角丸を設定というのは何となく分かるのですが、「#global-nav > ul > li」の「>」を使ったような記述を初めて見ました。これはどういった意味を表しているのでしょうか？「#global-nav」にある「ul」の「li」という意味のものであれば、「>」は別に記載する必要性はないと思うのですが…また、この記述もCSS3からのものなのでしょうか？ご存じ方、ご教授いただければ幸いです。よろしくお願いします。
- ベストアンサー
- HTML
CSSのセレクタの指定方法
基本的なところで恐縮です。ひさびさに他人が作ったHTML＆CSSをいじっていたら混乱してきました。たとえば以下のようはHTMLがあったとします。 -- <ul id="gmemu"> <li>hoge1</li> <li>hoge2</li> </ul> -- このとき、ul、liタグのスタイルを定義したいときのセレクタの指定の仕方としてはどちらが正しいのでしょうか？ ■その1（ID名タグ名） #gmenu ul{ } #gmenu li{ } ■その2（タグ名 ID名） ul#gmenu{ } ul#gmenu li{ } かなり初心者入ってますが、教えていただければ幸いです。よろしくお願いします。
- ベストアンサー
- HTML
ｃｓｓの記述について教えてください、<ul><li>
ｃｓｓの記述について教えてください。勉強不足で<li>タグだけなら正常に表示できるのですが、無理に<ul>タグを追加すると型崩れしてしまいます。<ul>タグは必須としていれなくてもいいですか？？<li>タグのみで
- ベストアンサー
- ホームページ作成ソフト
CSSのみでのドロップダウンメニューについて
下のサイトを参考にドロップダウンメニューを作成したのですが、ドロップダウンで出てくるサブメニューにマウスを移動した際、一番上のメニューのhoverの効果が消えてしまい困っています。どうすれば、サブメニューにマウスを移動しても一番上のメニューのhoverの効果を残せるようにできるのでしょうか？【参考にしたサイト】 http://weboook.blog22.fc2.com/blog-entry-359.html （このサイトでは綺麗に動いています。。）【私のコード】 <!DOCTYPE html> <html> <head> <style type="text/css"> /** １階層目 **/ #menu { list-style-type: none; } #menu > li { position: relative; float: left; text-align: center; } #menu > li > a { display:inline-block; margin-left:20px; line-height: 1; } #menu > li > a:hover { background:lightpink; } /** ２階層目 **/ #menu > li > ul { position: absolute; top: 100%; left: 0; list-style-type: none; } #menu > li > ul > li { position: relative; overflow: hidden; height: 0; width: 200px; text-align:left; } #menu > li:hover > ul > li { overflow: visible; height:2em; } </style> </head> <body> <div> <ul id="menu"> <li><a href="#">menu 1</a></li> <li><a href="#">menu 2</a> <ul> <li><a href="#">sub menu 1</a></li> <li><a href="#">sub menu 2</a></li> </ul> </li> </ul> </div> </body> </html> 宜しくお願い致します。
- 締切済み
- CSS
jQuery プルダウンメニュー
プルダウンメニューの一部で行き詰っています。メニュー１のサブメニューが開いている状態で、メニュー２をクリックした時メニュー１のサブメニューが閉じるようにする(その逆パターンも含む)。サブメニューにカーソルがある時、メニューはhoverさせないようにする。 ▼html----------------------------------------- <ul id="gNav"> <li>メニュー1 <ul> <li><a href="">サブメニュー1-1</a></li> </ul> </li> <li>メニュー2 <ul> <li><a href="">サブメニュー2-1</a></li> <li>サブメニュー2-2 <ul> <li><a href="">サブメニュー2-2-1</a></li> <li><a href="">サブメニュー2-2-2</a></li> <li><a href="">サブメニュー2-2-3</a></li> </ul> </li> </ul> </li> <li><a href="">メニュー3</a></li> </ul> ▼jQuery----------------------------------------- $(function(){ $("#gNav > li").click(function(){ $(this).children("ul").toggle(); }); $("#gNav > li > ul > li").mouseenter(function(){ $(this).children("ul").show(); }).mouseleave(function(){ $(this).children("ul").hide(); }); $("#gNav > li").hover(function(){ $(this).css("background-color","#ff9900"); },function(){ $(this).css("background-color","#ffcc00"); }); $("#gNav > li > ul > li").hover(function(){ $(this).css("background-color","#99cc66"); },function(){ $(this).css("background-color","#669933"); }); $("#gNav > li > ul >li > ul >li").hover(function(){ $(this).css("background-color","#dddddd"); },function(){ $(this).css("background-color","#eeeeee"); }); }); 宜しくお願いします。
- 締切済み
- JavaScript
menuのHTMLタグとCSSが上手くいかない
画像(1)が現状です。イメージは(2)です。何故HTMLタグを別々にするかというとスマホにしたらsubメニューをボトムに配置したいのです。メニューとsubメニューの背景がくっつかないのです。 (1)を(2)にするにはどうすれば良いでしょうか？以下がHTMLタグとCSSになります。アドバイスをお願いします。 HTMLタグ <div class="div1"><ul><li>メニュー1</li><li>メニュー2</li><li>メニュー3</li><li>メニュー4</li></ul></div> <div class="div2"><ul><li>sab1</li><li>sub2</li></ul></div> CSSスタイル ul li { list-style: none; } .div1 { background: #ccc; float: left; } .div2 { width: 240px; background: #999; float: right; } li { float: left; padding: 5px 15px; }
- 締切済み
- HTML
CSSのプルダウンメニュー
menu1とmenu2の挙動について疑問があります。添付画像をご覧ください。 menu2からsub4-1を選択している状態です。この時、menu2の背景色が赤に戻らないのは仕様でしょうか？それとも何か間違っているのでしょうか？背景を画像にしても同じ結果になります。 -------------------------------------------- ul#menu li{ float:left; list-style-type:none; text-align:center; } ul#menu ul li{ clear:both; } ul#menu li a,.menu1,.menu2{ display:block; width:200px; height:50px; line-height:50px; text-decoration:none; background:#ff0000; } ul#menu li a:hover,.menu1:hover,.menu2:hover{ background:#ffcc00; } ul#menu ul{ display:none; } ul#menu li:hover > ul{ display:block; position:absolute; } ul#menu ul ul{ margin:-50px 0 0 200px; } --------------------- <ul id="menu"> <li class="menu1">menu1</a> <ul> <li><a href="#">sub1</a> <ul> <li><a href="#">sub1-1</a></li> <li><a href="#">sub1-2</a></li> </ul> </li> <li><a href="#">sub2</a></li> </ul> </li> <li class="menu2">menu2</a> <ul> <li><a href="#">sub3</a></li> <li><a href="#">sub4</a> <ul> <li><a href="#">sub4-1</a></li> <li><a href="#">sub4-2</a></li> </ul> </li> </ul> </li> </ul> ------------------ お分かりになる方よろしくお願いします。
- 締切済み
- CSS
cssのみでメガメニューの作成について
http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/ のぺーじにある Big Menus, Small Screens: Responsive, Multi-Level Navigation というドロップダウンメニューをメガメニューに変更しようとしていますが 2階層目のリストがどうしても横並びにできません。 cssは下記の箇所のどこかに「float:right;」を入れればよいと考え、いろいろ触りましたが、 2階層目が表示されなくなったり、3階層目が表示されなくなったりします。 .nav > li > a { display: block; } .nav li ul { position:absolute; left: -9999px; border: 1px solid #ccc; background: #ffffff; } .nav > li.hover > ul { left: 0; } .nav li li.hover ul { left: 100%; top:0; } .nav li li a { display: block; background: #1d7a62; position: relative; z-index:100; } .nav li li ul { background:#249578; z-index:200; } .nav li li li a { background:#249578; z-index:200; } メガメニューはjqueryを使って作っている紹介ページがあり試しましたが、そうすると、レスポンシブ（小さい画面）した際の開閉式のメニューが動作しなくなりました。どうかご教示ください。お願いします。
- ベストアンサー
- CSS
画像変更について
いつもお世話になっています。今回は、マウスオーバーで自動開閉するアコーディオンメニューをli ul liを使って作成しました。以下がそのソースです。 ---------------------html---------------------  (1)<ul id="slidemenu_sample"> (2)<li class="bottom" > <a href="○○○" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')">TEST</a>  (3)<ul id="menu_1" style="display:none" onmouseout="menu_1.hidePopup('menu_1')" onmouseover="menu_1.showPopup('menu_1')"> (4)<li><a href="○○○">test</a></li> </ul>  </li> </ul>  ---------------------css--------------------- ul#slidemenu_sample li.bottom { text-align:center; background-image : url(bt_floor_bg_up.gif) ; font-size:15px; border:none; } ul#slidemenu_sample li.bottom a:hover { color:#ffffff; text-decoration:none; background-image : url(bt_floor_bg_down.gif) ; } ul#slidemenu_sample li ul li { background-image : url(bt_menu_bg_off.gif) ; } ul#slidemenu_sample li ul li a:hover { color:#ffffff; text-decoration:none; background-image : url(bt_menu_bg_on.gif) ; } --------------------------------------------- マウスオーバーで(2)(4)の背景画像をそれぞれの背景画像に変えたいと思っています。 (4)の背景画像は上記のソースで変えれたのですが、(2)の背景画像ををマウスオーバーで変えられません。 CSSで変えられると思うのですが、どうしたらいいのか分からず、詰まっています。助言をお願いいたします。
- ベストアンサー
- JavaScript