回答編集履歴

2

修正

2019/06/17 01:10

投稿

CHERRY
CHERRY

スコア25175

test CHANGED
@@ -130,6 +130,8 @@
130
130
 
131
131
 
132
132
 
133
+ sidebar クラスの中にある current_page_item クラスを指定する例:
134
+
133
135
  ```
134
136
 
135
137
  .sidebar .current_page_item {

1

追記

2019/06/17 01:10

投稿

CHERRY
CHERRY

スコア25175

test CHANGED
@@ -29,3 +29,113 @@
29
29
  }
30
30
 
31
31
  ```
32
+
33
+
34
+
35
+ ----
36
+
37
+ (追記)
38
+
39
+
40
+
41
+ 画像内の URL から推測して、html を拾ってきました。(ドメインは、 example.com に置き換えています。)
42
+
43
+
44
+
45
+ グローバルナビは、
46
+
47
+ ```
48
+
49
+ <nav class="globalnav">
50
+
51
+ <div class="container">
52
+
53
+ <div class="menu-programing-container"><ul id="menu-programing" class="menu"><li id="menu-item-251" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-251"><a href="http://example.com/">HOME</a></li>
54
+
55
+ <li id="menu-item-248" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-71 current_page_item menu-item-248"><a href="http://example.com/%e4%bc%81%e6%a5%ad%e6%83%85%e5%a0%b1/information" aria-current="page">企業情報</a></li>
56
+
57
+ <li id="menu-item-247" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-247"><a href="http://example.com/irinformation">IR・投資家情報</a></li>
58
+
59
+ <li id="menu-item-246" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-246"><a href="http://example.com/pressroom">プレスルーム</a></li>
60
+
61
+ <li id="menu-item-245" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-245"><a href="http://example.com/information3">採用情報</a></li>
62
+
63
+ <li id="menu-item-250" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-250"><a href="http://example.com/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b">お問い合わせ</a></li>
64
+
65
+ </ul></div> </div>
66
+
67
+ </nav>
68
+
69
+ ```
70
+
71
+
72
+
73
+ となっていて、 globalnav クラスの中にあります。
74
+
75
+
76
+
77
+ サイドバーは、
78
+
79
+ ```
80
+
81
+ <div class="sidebar">
82
+
83
+ <ul>
84
+
85
+
86
+
87
+ <li id="pages-4" class="widget widget_pages"><h2 class="widgettitle">企業情報</h2>
88
+
89
+ <ul>
90
+
91
+ <li class="page_item page-item-307 page_item_has_children current_page_ancestor current_page_parent"><a href="http://example.com/%e4%bc%81%e6%a5%ad%e6%83%85%e5%a0%b1">企業情報</a>
92
+
93
+ <ul class='children'>
94
+
95
+ <li class="page_item page-item-71 current_page_item"><a href="http://example.com/%e4%bc%81%e6%a5%ad%e6%83%85%e5%a0%b1/information" aria-current="page">会社概要</a></li>
96
+
97
+ <li class="page_item page-item-288"><a href="http://example.com/%e4%bc%81%e6%a5%ad%e6%83%85%e5%a0%b1/%e3%83%88%e3%83%83%e3%83%97%e3%83%a1%e3%83%83%e3%82%bb%e3%83%bc%e3%82%b8">トップメッセージ</a></li>
98
+
99
+ <li class="page_item page-item-290"><a href="http://example.com/%e4%bc%81%e6%a5%ad%e6%83%85%e5%a0%b1/%e3%83%9f%e3%83%83%e3%82%b7%e3%83%a7%e3%83%b3%e3%83%bb%e3%83%90%e3%83%aa%e3%83%a5%e3%83%bc">ミッション・バリュー</a></li>
100
+
101
+ </ul>
102
+
103
+ </li>
104
+
105
+ </ul>
106
+
107
+ </li>
108
+
109
+ </ul>
110
+
111
+
112
+
113
+
114
+
115
+ </div>
116
+
117
+ ```
118
+
119
+
120
+
121
+ となっていて、 sidebar クラスの中にあるようです。
122
+
123
+
124
+
125
+ ----
126
+
127
+
128
+
129
+ ということは、 `<div class="sidebar">` の中の `current_page_item` に対して CSS を適用するということなので、すでに記載している例のように CSS の `子孫セレクタ`を使えば、特定できると思います。
130
+
131
+
132
+
133
+ ```
134
+
135
+ .sidebar .current_page_item {
136
+
137
+ background-color: gray;
138
+
139
+ }
140
+
141
+ ```