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

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

質問する

ただいまの
回答率

88.91%

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

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,768
退会済みユーザー

退会済みユーザー

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


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

<div class="section-two">
<div class="inner clearfix">

<a class="mobile-only toggle-mobile-menu" href="#" title="Menu">Main Navigation <i class="fa fa-angle-down"></i></a>
<nav id="secondary-navigation" class="second-navigation" role="navigation">
<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/">その１</a>
<ul class="sub-menu">
    <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>
    <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>
</ul>
</li>
<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>
<ul class="sub-menu">
    <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>
    <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>
</ul>
</li>
<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>
<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/ごちゃごちゃ英数記号/">その４</a>
<ul class="sub-menu">
    <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>
</ul>
</li>
<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>
</ul>
</div>                    
</nav>


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

/*--------------------------------------------------------------
6.3        Secondary Navigation
--------------------------------------------------------------*/
.second-navigation {
    float: left;
    margin-left: 80px;
}
.second-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-header .section-two nav ul li {
    position: relative;
    float: left;
    margin-right: 25px;
}
.site-header .section-two nav ul li li {
    float: none;
    margin-right: 0;
}
.site-header .section-two nav ul li a {
    color: #737373;
    display: block;
    padding: 16px 0 17px 0;
    text-decoration: none;
}
.site-header .section-two nav ul li li {
    float: none;
    position: relative;
}
.site-header .section-two nav ul ul {
    background: #f5f5f5;
    position: absolute;
    left: 0;
    min-width: 200px;
    visibility: hidden;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
    transition: -webkit-transform 0.3s linear, visibility 0.1s;
    transition: transform 0.3s linear, visibility 0.1s;
    z-index: 9;
}
.site-header .section-two nav ul li:hover ul ul {
    visibility: hidden;
    -webkit-transform: translateY(20%);
    transform: translateY(20%);
    transition: -webkit-transform 0.3s linear, visibility 0.1s;
    transition: transform 0.3s linear, visibility 0.1s;
}
.site-header .section-two nav ul ul ul {
    left: 100%;
    top: 0;
}
.site-header .section-two nav ul li li a {
    padding: 10px 15px;
}
.site-header .section-two nav ul ul li:hover ul,
.site-header .section-two nav ul li:hover ul {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    transition: -webkit-transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}
.site-header .section-two nav ul li.current_page_item > a:before,
.site-header .section-two nav ul li.current_page_parent > a:before,
.site-header .section-two nav ul li.current_page_ancestor > a:before,
.site-header .section-two nav ul li.current-menu-parent > a:before,
.site-header .section-two nav ul li.current-menu-item > a:before,
.site-header .section-two nav ul li li:hover > a:before,
.site-header .section-two nav ul > li > a:before {
    background-color: #ff6565;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0);
    transition: all 0.2s ease-in-out 0s;
    width: 100%;
}
.site-header .section-two nav ul li.current_page_parent > a:before,
.site-header .section-two nav ul li.current_page_item > a:before,
.site-header .section-two nav ul li.current_page_ancestor > a:before,
.site-header .section-two nav ul li.current-menu-parent > a:before,
.site-header .section-two nav ul li.current-menu-item > a:before,
.site-header .section-two nav ul li li:hover > a:before,
.site-header .section-two nav ul > li > a:hover:before {
    transform: scaleX(1);
}

.menu-item menu-item-type-post_type menu-item-object-matome1 current-menu-item menu-item-460 {
    background-color: #808080;
}
.sub-menu ul {
    background-color: #808080;
}


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

.site-header .section-two nav ul > li:nth-child(2) > a:before {
    background-color: #4285F4;
}
.site-header .section-two nav ul > li:nth-child(3) > a:before {
    background-color: #FF8235;
}
.site-header .section-two nav ul > li:nth-child(4) > a:before {
    background-color: #AE69F6;
}
.site-header .section-two nav ul > li:nth-child(5) > a:before {
    background-color: #34A853;
}


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1 件

link

checkベストアンサー

0

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

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

    あなたすごすぎ！！！笑

    …失礼いたしました。
    できました！二日酔いが覚めるほど、喜びました。

    最初は0.001秒だけ適用され、しかしスグに元々のメインメニューの色がかぶってしまっていたのですが、!importantをつけて優先させ、見事に目標達成です(*^^)v


    参考サイトもありがとうございます。わかりやすいサイトですね。
    なるほど。メインメニューは全体をくくった親要素の子要素で、サブメニューはその孫要素にあたるのですね。
    しかしなぜ、その孫要素のclassだよとHTMLに書いてある「sum-menu」を、CSSで
    .sub-menu{これになってくれ}
    と指定しても無視されてしまったのか。。
    まったく、理解にくるしみます。(+_+)

    キャンセル

  • 2016/06/26 14:20

    > 二日酔いが覚めるほど
    おごってください。

    > と指定しても無視されてしまったのか。
    様々原因が考えられますが、CSSには優先順位があるため、それを前提に設計しなければ無視される事もあります。ちなみに「“!importantをつけて” は最後の最後の手段」としなければさらに混乱することになります。

    あとで参考URLを追記しておきます。

    キャンセル

  • 2016/06/26 18:07

    なるほど×１００
    後にかいたものが優先！だから、子CSSに書いた今回のものより、テーマCSSにあるもともとの色が採用されてしまい、0.001秒だけ適用されても、元々の色になってしまった。というわけですね。

    CSSの優先順位は奥が深いですねぇ。z-indexみたいに、important1、important2、で決まれたいいのに。

    importantを消していろいろためしてはみたのですが、
    .site-header .section-two nav ul > li:nth-child(n) a:before
    のうち、どこにClassをつければいいか？とか、どこまで[]でくくればいいか？などが分からず、断念。笑
    とりあえずその辺から勉強してみようと思います。



    しかし、、
    デベロッパーツールがおもしろすぎますね！
    って、いうか、、わ！これがあれば、毎回まいかい、ファイルを書き換えて、保存して、再読み込みして、、とやらなくてもいいのですね！なんてすごいんでしょう！

    キャンセル

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

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る