Q&A
ここに問題に対して試したことを記載してください。
margin:0 auto;で<p>の文章を中央寄せにしようとしたところ、下記のCSSのコードではできたのですが、クラス名を.content .textから.contentにするとできませんでした。これは<p>の直前のクラス名がcontent textであるため、このような結果となったのでしょうか？
HTML
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <title>Progate</title> 6 <link rel="stylesheet" href="stylesheet.css"> 7 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 8</head> 9<body> 10 11 <div class="wrapper"> 12 13 <div class="main"> 14 <h2>Learn Where to Get Started!</h2> 15 16 <div class="contents"> 17 <div class="content"> 18 <img src="#" alt="" /> 19 <p class="logo">####</p> 20 <p class="text">#####</p> 21 </div> 22 23 </div> 24 </div> 25 </div> 26 27</body> 28</html>
CSS
1.content .text{ 2 margin:0 auto; 3}
回答1件
0
ベストアンサー
CSSのセレクタにおいて、スペース記号は子孫結合子という結合子、つまり複数のセレクタを結合するための演算子のようなものです。ですから、.contentと.content .textではセレクトされる要素が異なります。
.contentの場合は、<element class="content">...</element>です。つまり、contentというクラスを持った要素すべてですね。一方、.content .textでは、contentというクラスを持った要素の子孫であるようなtextというクラスを持った要素がセレクトされます。つまり、
<element class="content"> ... <element class="text"> <!-- ←この要素がセレクトされる --> ... </element> ... </element>
このような要素が選択されるということですね。
さて、あなたが示したHTMLを例にこの動作を見てみると、どうなるでしょうか。
.contentでセレクトされる要素はこれになります。
<div class="content"> <img src="#" alt="" /> <p class="logo">####</p> <p class="text">#####</p> </div>
一方、.content .textでセレクトされる要素はこれです。
<p class="text">#####</p>
つまり、前者のセレクタの場合は、p要素を含んだdiv要素全体の左右のmarginが等しくなるようにレイアウトされるのに対して、後者の場合はp要素の左右のmarginが等しくなるようにレイアウトされます。
これが、質問にあるような動作の違いとなって表れたわけです。
投稿2020/01/04 10:06
総合スコア322
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/01/04 19:21
2020/01/13 09:58