セレクタの指定方法（結合子？）を教えてください

昨日こちらのサイトにてセレクタに関してアドバイスを頂き勉強を開始しております。
が書籍に乗っているセレクタ指定の部分が非常に少なくちょっと理解に困っており質問させていただきます。

前提・実現したいこと

h1の上にマウスが来たら左右にびよーんと二本の線が伸びる。
（初期状態では０ｐｘでマウスオンで200pxにのびる区切りの線みたいなものです）
二本の線は画像にて準備しておりbackground-imageで書いている部分がそれに該当いたします。
昨日質問させいただいたときは今回よりもっとシンプルなhtml構造だったのですが少し複雑にしてみたところ動かなくなり書籍とググりながらで色々セレクタあたりをいじってトライしております。

完成予定イメージ

該当のソースコード

html
1<!DOCTYPE html>
2<head>
3<meta charset="UTF-8">
4<link rel="stylesheet" href="stylecss.css">
5</head>
6<html>
7<body>
8<main>
9     <div class="one">
10          <h1>サンプル１</h1>
11     </div>
12     <div class="two">
13          <h2>サンプル２</h2>
14     </div>
15</main>
16</body>        
17</html>

css
1*{
2    padding: 0;
3    margin: 0;
4}
5
6
7main{
8    height:1000px;
9}
10h1{
11    display: inline-block;
12    width: 200px;
13}
14.one{
15    text-align: center;
16}
17    h1::after, h1::before{
18   content:"";　　　　　　　　　　　　　　　　　　　　　　　　
19   background-image: url(images/2color-border.png);
20   display: inline-block;
21   margin: 0 100px;
22   width: 0px;
23   height: 40px;
24   background-position-y: 20px;
25   background-repeat: no-repeat;
26
27transition-property: width;
28transition-duration: 0.5s;
29}
30main:hover h1::after, main:hover h1::before{　　　　　/*問題になっているコード部分だと思っています。結合子がわからないため空白にしています*/
31 width: 200px;
32}

試したこと

『main:hover』と『.h1::after』の間
『main:hover』と『p::before』の間
この二つの間のつなぎ方が問題だと思えています。
書籍では結合子が＞＋~の３つしかでてこないのですがどれにしてもうまくいかないんです。
上記のコードの場合問題だと感じている部分のコードはどのようにしたらいいのでしょうか？

現状として画像で差し込んでいる二本の線はbeforeの画像（線の画像が）ｈ１より上に出てきますがafterの画像で差し込んでいる線は全く見えない状態です。
というかなんでｈ１の上部にマウスオンの時に出てくるのかもわかってないです。
ｈ１はインラインブロック化しております。でそのbeforeとafterで入れているんだから左右に出てくるんだと思っているのですが

現状のイメージ

レイアウト崩れを引きずってる画像

お忙しいと思いますが宜しくお願いいたします。

ｈ１に対する考え

h1のwidth:200px;削除したパターン

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

回答2件

ベストアンサー

うまくいかない原因は、下記の2点です。

CSSコード内に全角空白が紛れ込んでいる。

content:"";の後と
main:hover h1::after, main:hover h1::before{の後

h1の幅を制限している(width: 200px;)ので疑似要素が収まりきらずに折り返されている。

全角空白を削除して、width: 200px;を削除すれば動くようになります。

結合子は今回うまくいかなかったこととは関係はないです。しかし、セレクタかh1だけだとすべてのh1に効いてしまうので、セレクタを結合して有効範囲を制限した方がいいでしょう。

css
1*{
2  padding: 0;
3  margin: 0;
4}
5
6main{
7  height:1000px;
8}
9.one > h1{
10  display: inline-block;
11/*  width: 200px; */」
12}
13.one {
14  text-align: center;
15}
16main > .one > h1::after,
17main > .one > h1::before {
18  content:"";
19  background-image: url(https://placehold.jp/0e19eb/ffffff/200x20.png);
20  display: inline-block;
21  margin: 0 100px;
22  width: 0px;
23  height: 40px;
24  background-position-y: 20px;
25  background-repeat: no-repeat;
26  transition-property: width;
27  transition-duration: 0.5s;
28}
29main:hover > .one > h1::after,
30main:hover > .one > h1::before {
31  width: 200px;
32}

これでも画面幅が狭いと折り返されますので、inline-block で横並びにするのではなく、Flexboxで横並びにするのが吉です。

投稿2020/10/04 06:17

編集2020/10/04 06:18

hatena19

総合スコア33782

eio

2020/10/04 07:01

回答ありがとうございます。全角スペースは探した限りではありませんでした。あとｈ１のwidth: 200px;は必要なイメージを持っています。h1はボックスだから親要素の範囲の限りで全開に広がっていると思います。でbeforeとafterで疑似要素が入るのでsのためにはだいたフォントと同じぐらいのh1スペースが好ましいんじゃないかと感じています…。って言葉じゃわかりにくいので簡単なずで自分のイメージ質問の方にを貼っておきます。とwidth: 200px;消したらｈ１より前でbeforeとafterが差し込まれてしまっています。

hatena19

2020/10/04 07:27 編集

質問のCSSコードには間違いなく全角空白かありますよ。実際のコードと違うのなら分かりませんが、回答者は質問にあるコードで判断してますので、実際のコードをコピーして貼り付けてもらわないと、正しい回答ができません。 > h1はボックスだから親要素の範囲の限りで全開に広がっていると思います。 width: 200px;を指定しなければ親要素全体に広がりますが、指定しているのでh1は 200px の幅になります。疑似要素はh1の子要素なので、200pxの幅内に入りますので折り返されます。。「サンプル１」というテキストの幅を200pxにしたいなら、 <h1><span>サンプル１</span></h1> と囲んで、h1 > span に対して幅を設定する必要があります。サンプルを作りましたので確認ください。 https://codepen.io/hatena19/pen/yLOmKPg

eio

2020/10/04 10:27

むむむ疑似要素は子要素になっている、、、書籍には載ってなかった情報ありがとうございます！でそうなると確かにh1がwaidth:200px;だと入りきれないから広げておかないといけないわけですね…。という事はインライン要素でなくてもokになりると…。という事は親要素.oneをdisplay:flex;にして子要素を横並びにして真ん中に持ってきたいからjustufy-content: center;で真ん中に持ってくると…。理想形になりました！！ありがとうございます！

eio

2020/10/04 10:29

サンプルもありがとうございます！自分のQ&Aをノートにつけていますのでログとして保管させていただきます！

hatena19

2020/10/04 10:36

ブラウザの検証ツール（デベロッパーツール）を使えるようになると、疑似要素は、指定した要素の子要素になっているというのが一目で分かります。 display:flex; での横並びも私もそうすると思います。

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

を二つ使えば行けます。

html+css
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9        * {
10            padding: 0;
11            margin: 0;
12        }
13
14
15        main {
16            height: 300px;
17            background-color: pink;
18        }
19
20
21        .one {
22            text-align: center;
23        }
24
25        h1 {
26            display: inline-block;
27            margin: 0;
28            vertical-align: top;
29        }
30
31        h1::after,
32        h1::before {
33            content: "";
34            background-color: chocolate;
35            display: inline-block;
36            width: 0;
37            height: 40px;
38            background-position-y: 20px;
39            background-repeat: no-repeat;
40            transition-property: width;
41            transition-duration: 0.5s;
42            vertical-align: top;
43            line-height: 0;
44        }
45
46        main:hover>.one>h1::after,
47        main:hover>.one>h1::before {
48            width: 200px;
49        }
50    </style>
51</head>
52
53<body>
54    <main>
55        <div class="one">
56            <h1>サンプル１</h1>
57        </div>
58        <div class="two">
59            <h2>サンプル２</h2>
60        </div>
61    </main>
62</body>
63
64</html>

投稿2020/10/04 04:58

Jon_do

総合スコア1373

eio

2020/10/04 06:19

回答いただいた通りにしたら動きました！が自分の方はなぜかレイアウト崩れを引っ張ってしまっています＾＾；画像を追加しておきます『,』の消し忘れ、全角スペースが入っていないか？などちょっと見てますが『(-ω-;)ウーンです』と『>』に関して何ですが一部抜粋の形でお伺いしたいのですが、 main:hover>.one>.h1::afterって mainの直下の.oneの直下のh1の疑似要素になると思っています。これはなぜmain:hover .h1::after（間に半角スペース）ではダメなんでしょうか？例えばですが自分が質問で書いているhtmlコードだと単純にｈ１に色を付けるときmain ｈ１{color: red;}とかでも色が付くと思うんですよね。（mainの中のh1を探して色が付くと思っています）わざわざmain>.one>h1としなくてもつくのになぜ今回のケースは『>』が必須なんでしょうか？

Jon_do

2020/10/04 06:42 編集

hatenaさんの回答にもある通りセレクタは関係無かったですね。うまく行かない理由もhatenaさんの説明通りです。自分が書いたコードもセレクタは関係なく main:hover .h1::afterとしても問題なく動きます。

eio

2020/10/04 06:48

いえいえ勉強になります！ありがとうございます！

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

あなたの回答