Q&AサイトのメインメニューのCSSがこのように書かれています。
全てのメニューが#ff6565でうにゅーんと表示されるわけです。
が、今回はこれを、追加するメニュー数に応じて色を指定したいんです。
WordPressを使っているため、追加メニューにクラス指定はできます。すると、下記CSSにそのクラスを書き加えればいいだけかな、と考えているのですが、、
一体どの部分をそのクラスで書き加えればいいのでしょうか？
CSS博士の方、よろしくお願いいたしますm(__)m
CSS
1/*-------------------------------------------------------------- 2 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}
回答1件
0
ベストアンサー
css
1//2番目のメニュー 2.site-header .section-two nav ul > li:nth-child(2) > a:before { 3 background-color: #ff0; 4} 5//3番目のメニュー 6.site-header .section-two nav ul > li:nth-child(3) > a:before { 7 background-color: #f00; 8}
htmlソースがないのでcssだけで推測という感じですが、:nth-child(n)を使って背景色を指定すればhtmlの方は変更しなくてもいけるかと思います。
投稿2016/06/23 10:20
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/06/23 11:12
退会済みユーザー
2016/06/23 11:17
退会済みユーザー
2016/06/23 12:02
退会済みユーザー
2016/06/23 12:54
退会済みユーザー
2016/06/23 12:59 編集
退会済みユーザー
2016/06/23 13:45