aタグのフォントカラーを変更したい

Question

前提・実現したいこと

buttonの中にあるaタグのフォントカラーを変更したいのですが、
設定がうまくいかず、元の色が表示されます。
色を変更できる設定方法を教えていただきたいです。
style.cssを変更する際は、キャッシュの削除をしています。

該当のソースコード

<td>
   {# ボタン #}
   <button type="submit" class="btn">
      <i class="icon-download"></i>
      <a class="a_btn" href="{{ path('ahi_sp_admin_hq_post_index', {'_format': 'csv'}) }}">出力</a>
   </button>
</td>

bootstrap.min.css

a{color:#0088cc;text-decoration:none;}

試したこと

style.css

.btn a {
    color:inherit;
}
.btn a {
    color:black !important;
.a_btn {
    color:black !important;
}

Answer 1

classbtnによりbuttonのデザインが指定されていたため、下記のコードにすることで、aの色を変更できました。
皆さんのご意見を見るに、buttonの中にaタグを指定しないほうが無難そうですね。
ご意見、ご回答ありがとうございました。

 <a type="submit" class="btn" href="{{ path('app_hq_post_index', {'_format': 'csv'}) }}>
      <i class="icon-download"></i>
      出力
 </a>

Answer 2

<button>タグの子孫要素として<a>タグは含めないので
HTML5チートシート

button {
	color:black !important;
}

って感じでどうでしょうか。
質問者さんの求める物とズレてたら申し訳ない。

追記:実装自体は可能だが、まぁ特別な理由がない限りやる必要がないだと思います。

Answer 3

!importantを使って変わらないのであれば、
style.cssが読み込まれていない可能性が高いと思います。

検証ツールでご提示のaタグに当たっているCSSをご確認いただけますでしょうか。

Comments

[K_3578]

そもそも<button>タグ内って<a>タグ含めるんでしたっけ･･･？

[退会済みユーザー]

火狐（Firefox）のみ仕様をしっかり守ってるから動作しない。
動作しないブラウザがあるから使うべきではない。
という感じの議論があったかな？と思います。
HTML Standardを読んでみても「aタグをbuttonに入れるな」と書いていないため、
他のブラウザが火狐に追従しない限り好みでいいんじゃないかなぁと考えております。
火狐を切れるのであれば。

参考URL　button要素にはhref属性を持つa要素を(本来は)含めてはいけない。
https://qiita.com/khsk/items/c026b4a21ac27b2cea71

以下蛇足です。
僕はこの実装をしません。なぜそうするのかちょっと分からないからです。
逆であれば問題なさそうな気がします。<a>に<div>入れてもOKという時代らしいのでっ

※不要だと思いますがFirefoxと修正しました。

[K_3578]

＠amiya-seさん
返信ありがとうございます。
これに従ってるのってFirefoxだけだったんですね。それは知りませんでした。情報感謝します。
自分もこの実装は正直したくないです。なので尚更質問者さんがこの実装をしようとしている
理由が知りたいなぁ･･･と

追記:FireFox→Firefox

[退会済みユーザー]

> K_3578様
buttonとaって両方「押す要素」だと思うので、
同時に発火させて変な干渉をさせたくないという開発者の意思でしょうか。
というか単純に火狐の開発者が規則にうるさく、
他のブラウザの開発者がゆるいだけなんじゃないかなぁと思ったりもします。
外国の方は「動けばどっちでもよくね？」と考えている方が多そうですし。
※僕もまぁ動けば許容する派です。自分以外のコードであれば。

質問者さんに聞かないと分かりませんが、
「押すから<buton>」で「飛ばすから<a>」じゃないかなぁ。
それ以上でもそれ以下でもないと思いますよ。
<li>の中に<a>とか入れますし、その延長線上かと。

[退会済みユーザー]

> K_3578様
今、火狐で確認してみましたが、button>aでもhrefに飛びました。※#付けただけですが発火OK
ついでですが、aにcolor:red;で赤文字になりました。
開発者は丸くなったんでしょうかね？

※Firefox←公式名称はこちらのようなのでご注意ください。
FFと書いたりするのでFireFoxにしてしまいましたが、気にされる方も…いますかね？※

[K_3578]

@amiya-seさん
＞※僕もまぁ動けば許容する派です。自分以外のコードであれば。
殆どの方がこの考えだと思ってます。

＞開発者は丸くなったんでしょうかね？
朱に交われば赤くなるって言葉もありますし、そうかもしんないですねぇ･･･。

＞「押すから<button>」で「飛ばすから<a>」じゃないかなぁ。
成程、考え方は分かりますね。

＞※Firefox←公式名称はこちらのようなのでご注意ください。
メインで火狐使ってないので自分も間違えました、お恥ずかしい･･･。
ご指摘感謝します。

[Lhankor_Mhy]

横からすみません。
手元のFirefoxで試してみましたが、button直下のリンク要素は普通に動作しました。

---

button要素のspecを見ると、

> Phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified.
(フレージングコンテンツ、ただし対話型コンテンツおよびtabindex属性のある要素を含んではいけない)

とあり、タグの省略が、

> Neither tag is omissible.
（開始タグと終了タグの両方とも省略不可）

とされています。

ご存知の通り、終了タグ省略不可要素の開始タグの後に、内容として許されていない要素が登場した場合、ブラウザが「終了タグを忘れているみたいだから、ここに挿入しておきますね」という親切心を発揮することがあるので、それ系の話なのかなあ？と思いました。

[Lhankor_Mhy]

あ、違うか。終了タグを勝手に差し込むのは、閉じタグ省略可能の場合でしたね。

そうだとすると、Firefox が仕様から外れた処理をしていたところ、仕様通りに変更したのかもしれません。
見当違いのことを言ってすみませんでした。

[退会済みユーザー]

> Lhankor_Mhy様
昔話題になった話だと思うのですが、３行でまとめると、
火狐「仕様通りボタンタグ内にAタグとか認めんぞ」
他「えーなんでもよくね？動かすよ？」
コーダー「なにこれ、火狐だけ動かないじゃん、バグとか最悪」
火狐「ば、ばぐちゃうわ！でも仲間外れにされると困るから合わせたるわ！」
こんな感じだったかと。４行でした、すみません。

[K_3578]

火狐さんは生真面目で融通が効かないタイプだったようですな。

[K_3578]

自分もHTML Standard読んできたのですが

>> Phrasing content, but there must be no interactive content descendant and no descendant with the tabindex attribute specified.
(フレージングコンテンツ、ただし対話型コンテンツおよびtabindex属性のある要素を含んではいけない)

<a>タグにhref属性が存在する場合対話型コンテンツって事は含んでなければOKなのか･･･?
この辺よく分かってないです。

HTML5から確かhrefって必須じゃなくなってたと思うんですが、hrefなしだと何に使うんだ･･･？
ダミー要素以外で使うんですかね？

[Lhankor_Mhy]

> If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed
（href属性がない場合、その他でリンクが配置されているべきだったプレースホルダです）
https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-a-element

いくつかのコンテンツがあって、通常はそこにリンクが配置されているけど、何らかの理由でそのコンテンツだけリンクが配置されない場合のプレースホルダ、みたいな感じでしょうか……？

[K_3578]

@Lhankor_mhyさん

>何らかの理由でそのコンテンツだけリンクが配置されない場合
コンテンツのリンクが何らかの理由で変更になる、とかですかね？自分にはそれぐらいしか思いつかないです･･･。

[Lhankor_Mhy]

たとえば、リンク集のページがあって、デッドリンクになった場合には空リンクとしてhrefを持たないa要素を置いておく、みたいな話ではないかな、と。

[K_3578]

@Lhankor_mhyさん
成程、参考になります。
脱線した内容に対しての回答感謝します。