sassの入れ子について

表題の通り、入れ子について質問いたします。

私が今までの認識は
HTMLの構造上、親要素と子要素の関係性になっていれば、
sassでは「入れ子」にする必要があると思っています。

しかし、今回下記のコードにするとdisplayで横並びになりました。

何が起こったのか知りたいです。

HTML
1<footer class="footer">
2    <div class="inner">
3        <nav class="footer-wrap">
4            <ul class="footer-list">
5                <li class="list-item"><a href="#">利用規約</a></li>
6                <li class="list-item"><a href="#">プライバシーポリシー</a></li>
7                <li class="list-item"><a href="#">個人商取引法に基づく表記</a></li>
8                <li class="list-item"><a href="#">お問い合わせ</a></li>
9            </ul>
10        </nav>
11        <div class="footer-logo"><img src="image/logo.footer.png" alt="極楽丁"></div>
12    </div>
13    <p class="copy-right">&copy;Copyright (c) 2021 極楽亭 All Rights Reserved.</p>
14</footer>
15

sass
1.footer{
2    height: 288px;
3    background-color: #4D0000;
4    border-top: #6E6E6E 1px;
5    .inner{
6        height: 288px;
7        background-color: #4D0000;
8        
9        //display: flex;
10    }
11
12    .footer-wrap{
13    }
14    .footer-list{
15            
16                display: flex;
17                justify-content: center;
18    }
19    .list-item{
20        +.list-item{
21            margin-left: 35px;
22        }
23        
24        .a{
25            color: white;
26            font-size: 16px;
27            text-align: center;
28            justify-content: space-between;
29            display: flex;
30            }
31
32                }
33
34            
35
36        
37    .footer-logo{
38            width: 188px;
39            height: 70px;
40            text-align: center;
41            margin-top: 62px;
42
43        }
44
45    
46}

K_3578

2021/05/10 02:29 編集

未解決の質問置いといてどんどん新規スレッド立てるからなーんも解決しないんすよ。基本から分かってないんだからここで質問してる暇があったら基本から勉強した方が絶対早い。

Lhankor_Mhy

2021/05/10 02:18

『displayで横並び』とは、具体的にはどういう現象ですか？「スクリーン上で横並び」みたいな意味ですか？

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

回答1件

ベストアンサー

HTMLの構造上、親要素と子要素の関係性になっていれば、

sassでは「入れ子」にする必要があると思っています。

これは、状況にもよるので、
一概には言えません。
SASSの前に、
CSSの基本に関わる話ですので、
CSSのセレクタと、詳細度に関して、よくよく勉強なさって下さい。
詳細度は、簡単に言うと、CSSの最終的なプロパティと値を効かせる、セレクタの優先度です。高ければ高いほど、優先して適用されます。

さて、横並びになっているのは、単純に、
display: flex;を効かせているからかと思われます。

投稿2021/05/10 02:25