質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3303閲覧

親メニューに適用される色分けを、子メニューにも適用したいです。(WordPress)

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/06/25 21:37

編集2016/06/25 21:40

現状は親メニューが何色かあるのですが、子メニューには親メニューの色分けが適用されません。
イメージ説明
そこで、子メニューのclassをCSSで指定してみたのですが、まったく言うことをきかず無視するんです。

下記は出力されたHTMLです。
こちらを見ると、子メニューはsub-menuというclassのハズなのです。

HTML

1<div class="section-two"> 2<div class="inner clearfix"> 3 4<a class="mobile-only toggle-mobile-menu" href="#" title="Menu">Main Navigation <i class="fa fa-angle-down"></i></a> 5<nav id="secondary-navigation" class="second-navigation" role="navigation"> 6<div class="menu-ごちゃごちゃ英数記号-container"><ul id="secondary-menu" class="menu clearfix"><li id="menu-item-265" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-265"><a href="http://127.0.0.1:4001/dev_test/">その1</a> 7<ul class="sub-menu"> 8 <li id="menu-item-460" class="menu-item menu-item-type-post_type menu-item-object-tset current-menu-item menu-item-460"><a href="http://127.0.0.1:4001/dev_test/test1/ごちゃごちゃ英数記号/">テストじゃ</a></li> 9 <li id="menu-item-376" class="neko1 menu-item menu-item-type-post_type menu-item-object-page menu-item-376"><a href="http://127.0.0.1:4001/dev_test/forum/">Forum</a></li> 10</ul> 11</li> 12<li id="menu-item-264" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-264"><a href="http://127.0.0.1:4001/dev_test/ごちゃごちゃ英数記号/">その2</a> 13<ul class="sub-menu"> 14 <li id="menu-item-468" class="menu-item menu-item-type-post_type menu-item-object-test2 menu-item-468"><a href="http://127.0.0.1:4001/dev_test/test2/ごちゃごちゃ英数記号">テストです</a></li> 15 <li id="menu-item-384" class="neko2 menu-item menu-item-type-post_type menu-item-object-page menu-item-384"><a href="http://127.0.0.1:4001/dev_test/forum/">Forum</a></li> 16</ul> 17</li> 18<li id="menu-item-263" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-263"><a href="http://127.0.0.1:4001/dev_test/ごちゃごちゃ英数記号/">その3</a></li> 19<li id="menu-item-262" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-262"><a href="http://127.0.0.1:4001/dev_test/ごちゃごちゃ英数記号/">その4</a> 20<ul class="sub-menu"> 21 <li id="menu-item-461" class="menu-item menu-item-type-post_type menu-item-object-test1 menu-item-461"><a href="http://127.0.0.1:4001/dev_test0/test1/ごちゃごちゃ英数記号/">カスタム投稿タイプのテストだよ</a></li> 22</ul> 23</li> 24<li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="http://127.0.0.1:4001/dev_tset/ごちゃごちゃ英数記号/">about</a></li> 25</ul> 26</div> 27</nav>

そしてCSSはこうです。
ここでは上のHTMLにあるsub-menuというclassなどどこにも指定していないのに、親メニューのアニメーションや、元々の親メニューの色(次のCSSで元々1色だったものを変えました)が、子メニューにちゃんと適用されているのもまた不思議です。

css

1/*-------------------------------------------------------------- 26.3 Secondary Navigation 3--------------------------------------------------------------*/ 4.second-navigation { 5 float: left; 6 margin-left: 80px; 7} 8.second-navigation ul { 9 list-style: none; 10 margin: 0; 11 padding: 0; 12} 13.site-header .section-two nav ul li { 14 position: relative; 15 float: left; 16 margin-right: 25px; 17} 18.site-header .section-two nav ul li li { 19 float: none; 20 margin-right: 0; 21} 22.site-header .section-two nav ul li a { 23 color: #737373; 24 display: block; 25 padding: 16px 0 17px 0; 26 text-decoration: none; 27} 28.site-header .section-two nav ul li li { 29 float: none; 30 position: relative; 31} 32.site-header .section-two nav ul ul { 33 background: #f5f5f5; 34 position: absolute; 35 left: 0; 36 min-width: 200px; 37 visibility: hidden; 38 -webkit-transform: translateY(20%); 39 transform: translateY(20%); 40 transition: -webkit-transform 0.3s linear, visibility 0.1s; 41 transition: transform 0.3s linear, visibility 0.1s; 42 z-index: 9; 43} 44.site-header .section-two nav ul li:hover ul ul { 45 visibility: hidden; 46 -webkit-transform: translateY(20%); 47 transform: translateY(20%); 48 transition: -webkit-transform 0.3s linear, visibility 0.1s; 49 transition: transform 0.3s linear, visibility 0.1s; 50} 51.site-header .section-two nav ul ul ul { 52 left: 100%; 53 top: 0; 54} 55.site-header .section-two nav ul li li a { 56 padding: 10px 15px; 57} 58.site-header .section-two nav ul ul li:hover ul, 59.site-header .section-two nav ul li:hover ul { 60 visibility: visible; 61 -webkit-transform: translateY(0%); 62 transform: translateY(0%); 63 transition: -webkit-transform 0.3s ease-in-out; 64 transition: transform 0.3s ease-in-out; 65} 66.site-header .section-two nav ul li.current_page_item > a:before, 67.site-header .section-two nav ul li.current_page_parent > a:before, 68.site-header .section-two nav ul li.current_page_ancestor > a:before, 69.site-header .section-two nav ul li.current-menu-parent > a:before, 70.site-header .section-two nav ul li.current-menu-item > a:before, 71.site-header .section-two nav ul li li:hover > a:before, 72.site-header .section-two nav ul > li > a:before { 73 background-color: #ff6565; 74 bottom: 0; 75 content: ""; 76 height: 3px; 77 left: 0; 78 position: absolute; 79 right: 0; 80 transform: scaleX(0); 81 transition: all 0.2s ease-in-out 0s; 82 width: 100%; 83} 84.site-header .section-two nav ul li.current_page_parent > a:before, 85.site-header .section-two nav ul li.current_page_item > a:before, 86.site-header .section-two nav ul li.current_page_ancestor > a:before, 87.site-header .section-two nav ul li.current-menu-parent > a:before, 88.site-header .section-two nav ul li.current-menu-item > a:before, 89.site-header .section-two nav ul li li:hover > a:before, 90.site-header .section-two nav ul > li > a:hover:before { 91 transform: scaleX(1); 92} 93 94.menu-item menu-item-type-post_type menu-item-object-matome1 current-menu-item menu-item-460 { 95 background-color: #808080; 96} 97.sub-menu ul { 98 background-color: #808080; 99} 100

このCSSだけだと全ての親メニューが同じ1つの色なので、子テーマのCSSにこう書いています。
おかげで、親メニューだけは色分けされています。

css

1 2.site-header .section-two nav ul > li:nth-child(2) > a:before { 3 background-color: #4285F4; 4} 5.site-header .section-two nav ul > li:nth-child(3) > a:before { 6 background-color: #FF8235; 7} 8.site-header .section-two nav ul > li:nth-child(4) > a:before { 9 background-color: #AE69F6; 10} 11.site-header .section-two nav ul > li:nth-child(5) > a:before { 12 background-color: #34A853; 13}

以上です。
長くなってしまいもうしわけございませんが、、
どうすれば現状の親メニューの色分けが、子メニューにも適用されるか。
お分かりになる方、いらっしゃいましたらよろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こうすれば適用されませんか?

CSS

1/* 「○○ > a:before」 となっている箇所全てを 「○○ a:before」にする。下記は一例。 */ 2.site-header .section-two nav ul > li:nth-child(2) a:before { background-color: #4285F4; } 3.site-header .section-two nav ul > li:nth-child(3) a:before { background-color: #FF8235; } 4.site-header .section-two nav ul > li:nth-child(4) a:before { background-color: #AE69F6; } 5.site-header .section-two nav ul > li:nth-child(5) a:before { background-color: #34A853; }

子セレクタは「直接の子要素」にのみ適用されます。

【子セレクタ (E > F)|セレクタ|CSS HappyLife ZERO】
http://zero.css-happylife.com/selectors/child_combinators.shtml

【CSS3のセレクタ全42種 まとめておさらい使い方リファレンス | EXP - クリエイティブな事をはじめた(い)全ての人達へ】
http://wp-e.org/2014/05/20/2420/


追記:

【第4回 CSSの「適用順」と「上書き」の特性を賢く使う - 今度こそ挫折しない! CSS入門 | Webデザインとグラフィックの総合情報サイト - MdN Design Interactive -】
http://www.mdn.co.jp/di/articles/517/?page=4

【CSS優先順位の実例とまとめ | Mawatari.jp】
http://mawatari.jp/archives/css-selector-priority

【CSSセレクタの優先順位の計算方法 - Qiita】
http://qiita.com/oh_rusty_nail/items/e896825cd54e5c0a3666

デベロッパーツールで確認しながら変更、も調査に役立ちます。

【【初心者向け】GoogleChromeデベロッパーツールの使い方 | ネットマプラス】
http://media.net-marketing.co.jp/topics/system/20141104/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説:デベロッパーツールの使い方:Google Chrome版Firebug:デベロッパーツール取扱説明書|gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

投稿2016/06/26 01:54

編集2016/06/26 05:22
kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/06/26 04:53

あなたすごすぎ!!!笑 …失礼いたしました。 できました!二日酔いが覚めるほど、喜びました。 最初は0.001秒だけ適用され、しかしスグに元々のメインメニューの色がかぶってしまっていたのですが、!importantをつけて優先させ、見事に目標達成です(*^^)v 参考サイトもありがとうございます。わかりやすいサイトですね。 なるほど。メインメニューは全体をくくった親要素の子要素で、サブメニューはその孫要素にあたるのですね。 しかしなぜ、その孫要素のclassだよとHTMLに書いてある「sum-menu」を、CSSで .sub-menu{これになってくれ} と指定しても無視されてしまったのか。。 まったく、理解にくるしみます。(+_+)
kei344

2016/06/26 05:20

> 二日酔いが覚めるほど おごってください。 > と指定しても無視されてしまったのか。 様々原因が考えられますが、CSSには優先順位があるため、それを前提に設計しなければ無視される事もあります。ちなみに「“!importantをつけて” は最後の最後の手段」としなければさらに混乱することになります。 あとで参考URLを追記しておきます。
退会済みユーザー

退会済みユーザー

2016/06/26 09:07

なるほど×100 後にかいたものが優先!だから、子CSSに書いた今回のものより、テーマCSSにあるもともとの色が採用されてしまい、0.001秒だけ適用されても、元々の色になってしまった。というわけですね。 CSSの優先順位は奥が深いですねぇ。z-indexみたいに、important1、important2、で決まれたいいのに。 importantを消していろいろためしてはみたのですが、 .site-header .section-two nav ul > li:nth-child(n) a:before のうち、どこにClassをつければいいか?とか、どこまで[]でくくればいいか?などが分からず、断念。笑 とりあえずその辺から勉強してみようと思います。 しかし、、 デベロッパーツールがおもしろすぎますね! って、いうか、、わ!これがあれば、毎回まいかい、ファイルを書き換えて、保存して、再読み込みして、、とやらなくてもいいのですね!なんてすごいんでしょう!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問