cssのセレクタがhtmlに存在しないのに設定が反映されてる

railsのcssとhtmlのソースコードをいじっています。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>TweetApp</title>
5    <%= csrf_meta_tags %>
6
7    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
8    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
9  </head>
10
11  <body>
12    <header>
13      <div class="header-logo">
14        <%= link_to("TweetApp", "/") %>
15      </div>
16      <ul class="header-menus">
17        <li>
18          <%= link_to("TweetAppとは", "/about") %>
19        </li>
20      </ul>
21    </header>
22    <%= yield %>
23  </body>
24</html>

css
1
2/* 共通レイアウト ================================ */
3body {
4  color: #2d3133;
5  background-color: #3ecdc6;
6  margin: 0;
7  min-height: 1vh;
8}
9
10.main {
11  position: absolute;
12  top: 64px;
13  width: 100%;
14  height: auto;
15  min-height: 100%;
16  background-color: #f5f8fa;
17}
18
19.container {
20  max-width: 600px;
21  margin: 60px auto;
22  padding-left: 15px;
23  padding-right: 15px;
24  clear: both;
25}
26
27
28
29/* ヘッダー ================================ */
30header {
31  height: 64px;
32  position: absolute;
33  z-index: 1;
34  width: 100%;
35}
36
37.header-logo {
38  float: left;
39  padding-left: 20px;
40  color: white;
41  font-size: 22px;
42  line-height: 64px;
43}
44
45.header-logo a{
46  color: white;
47  font-size: 22px;
48}
49
50.header-menus {
51  float: right;
52  padding-right: 20px;
53}
54
55.header-menus li {
56  float: left;
57  line-height: 64px;
58  font-size: 13px;
59  color: white;
60  padding-left: 15px;
61}
62
63.header-menus a {
64  float: left;
65  font-size: 13px;
66  color: white;
67}
68
69.header-menus .fa {
70  padding-right: 5px;
71}
72
73.header-menus input[type="submit"] {
74  padding: 0 20px;
75  float: left;
76  line-height: 64px;
77  color: white;
78  margin: 0;
79  font-size: 13px;
80}
81

.header-logo aはHTMLにないと思うのですが、.header-logoのcolorは反映されず```.header-logo a

yoshinavi

2018/11/22 03:58

「.header-logo a」がHTMLに「ない」と思っているのに、なぜCSSで「.header-logo a」の設定を行ったのでしょうか？

退会済みユーザー

2018/11/26 02:14

ソースコードです！

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLは出力されたHTML（ブラウザで「ページのソースを表示」）と、JavaScript等で構造が決まります。
<%= link_to("TweetApp", "/") %>がa要素を出力しているだけでは？

投稿2018/11/21 02:55

kei344

総合スコア69400

退会済みユーザー

2018/11/21 02:59

kei344さん、回答ありがとうございます！私も<a href =""></a>と <%= link_to="" %>は同じものと覚えたのですが、cssのセレクタの指定までlink_toメソッドは<a>を引き継ぐのでしょうか？

Takumiboo

2018/11/21 03:03

根本的に勘違いされていませんか？<%= link_to="" %>は結果的にaタグを出力しているのではないですか？(kei344さんの回答にあるように、ブラウザでソースを表示してみてください)

kei344

2018/11/21 03:03

railsはサーバ上でブラウザに渡すHTMLを組んで、ブラウザはできたHTMLをCSSで装飾して表示しています。CSSはHTMLがrailsで組んだ物であろうとPHPで組んだ物であろうと、JavaScriptで後から追加した物であろうと区別せず、結果としてブラウザ上にあるHTMLを定義どおり装飾します。

退会済みユーザー

2018/11/26 02:18

返信遅くなってしまってすいません。返信が通知されなくて。。現在、HTMLでしかやってないはずなんですが、もしかしたら、javascriptで指定しているのかも知れませんね。ありがとうございました。

Takumiboo

2018/11/27 03:34

やはり何か勘違いされていますね。kei344さんがおっしゃっているのは、HTMLで直接記入したものも、Rails上で記述したものも、JavaScriptで作成されたHTMLも、全て同じCSSが適用されるということです。そして質問者様がHTMLのソースとして挙げているのは正確にはHTMLではありません。<%= link_to="" %>と入力されたものが、実際にブラウザに表示される際には<a href =""></a>に変換されています。そしてCSSには該当するa要素に装飾が当てられているので、適用されているということです。

行動規範の内容に同意します