16bit!

エンジニアじゃなくなっちゃった人が何かを書くブログ

【Rails】CSS初心者だけどドロップダウン付きのメニューバーを簡単に作りたい

現在4日連続くらいで更新してるみたいなので、
せっかくだから今日も更新します。

CSS MENUMAKER

初心者でもお洒落なメニューバーが作れる!「CSS MENUMAKER」 - 私の小規模なブログ

これを読みました。
すごく簡単そうだったので、キャッチアップも兼ねて、
これで生成されたCSSをベースに、
Railsで自作しているタスク管理ツールのメニューバーを改造してみることにしました*1

詳細はQiitaをご参照ください。

Railsで簡単にメニューバーを作る方法 - Qiita [キータ]

セレクタ指定の謎

上記で生成されたCSSに、

#cssmenu > ul li {
  hogehoge
}
#cssmenu > ul > li {
  foofoo
}

みたいなのがあったのですが、
これらのセレクタが指定している要素の違いが分からなかったのでググりました。

意外と知らない!?CSSセレクタ20個のおさらい|Webpark

4. E F (子孫要素に適用)
セレクタを半角スペースで区切ると、ある要素の下の階層にある要素にスタイルを適用します。

5. E > F (子要素にのみ適用)
セレクタを「>」で区切ると、ある要素の直下の階層にある要素にスタイルを適用します。

なるほどー。
半角スペース区切りだと、その下にある要素全てが対象になって、
山括弧(>)を付けると、その直下の要素のみが対象になるのか。

CSSをちゃんと勉強したことがないので、今更こんなことを学んだりもしてます。
初心者丸出しですね。

こんな初心者丸出しのことはQiitaには書けないのでこっちに書きます。


終わり。

*1:改造前はtable使ってました。ドロップダウンはjQueryで書いてました。