teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

説明追記

2020/10/07 21:25

投稿

fukazume
fukazume

スコア78

title CHANGED
@@ -1,1 +1,1 @@
1
- Bootstrapで定義されたCSSクラスを意図した要素に効率的に適用したい
1
+ Bootstrapで定義されたCSSクラスを意図したHTML要素に効率的に適用したい
body CHANGED
@@ -1,7 +1,7 @@
1
1
  ##質問
2
2
  nav要素配下の子孫要素全てにBootstrapのtext-lightクラスを適用したいですのですが、nav要素にtext-lightを指定しても子孫要素のaタグなどには適用されません。子孫要素全てに適用しようとする場合、各子孫要素へ個別にtext-lightクラスを指定する非効率な方法しか思い浮かびませんでした。
3
3
 
4
- 一度の記述でnav全体に適用できるような、効率的なCSS指定方法はございませんでしょうか?
4
+ 一度の記述でnav全体のテキストに適用できるような、効率的なCSS指定方法はございませんでしょうか?
5
5
 
6
6
  どうぞよろしくお願い申し上げます。
7
7
 
@@ -12,13 +12,14 @@
12
12
 
13
13
 
14
14
  ```html
15
+ <!-- 一度の記述でtext-lightクラスをnav要素全体に適用したいです。 -->
15
- <nav class="navbar fixed-top navbar-expand-lg navbar-dark text-light "> <!-- text-lightクラスをnav要素全体に適用したいです。 -->
16
+ <nav class="navbar fixed-top navbar-expand-lg navbar-dark text-light ">
16
17
  <a class="navbar-brand text-light" href="#">サイト名</a>
17
18
 
18
19
  <div class="collapse navbar-collapse" id="Navbar">
19
20
  <ul class="navbar-nav mr-auto">
20
21
  <li class="nav-item">
21
- <a href="#" class="nav-link text-light">マイページ</a>
22
+ <a href="#" class="nav-link">マイページ</a>
22
23
  </li>
23
24
 
24
25
  <li class="nav-item">
@@ -28,4 +29,25 @@
28
29
  </ul>
29
30
  </div>
30
31
  </nav>
32
+ ```
33
+
34
+ ##現状の妥協策:非効率なtext-light指定方法(各要素にその都度指定する非効率な記述方法)
35
+ ```html
36
+ <!-- 一度の記述でtext-lightクラスをnav要素全体に適用したいです。 -->
37
+ <nav class="navbar fixed-top navbar-expand-lg navbar-dark text-light ">
38
+ <a class="navbar-brand text-light" href="#">サイト名</a>
39
+
40
+ <div class="collapse navbar-collapse" id="Navbar">
41
+ <ul class="navbar-nav mr-auto">
42
+ <li class="nav-item">
43
+ <a href="#" class="nav-link text-light">マイページ</a>
44
+ </li>
45
+
46
+ <li class="nav-item">
47
+ <a class="nav-link text-light" href="#">管理画面</a>
48
+ </li>
49
+
50
+ </ul>
51
+ </div>
52
+ </nav>
31
53
  ```