同一要素内で、複数の疑似要素を使用する場合

Question

前提・実現したいこと

・section9、h4ダミーテキスト前に、疑似要素で【url(img/Q..svg)】を追加したい

発生している問題・エラーメッセージ

・h4の右端にも、開閉ボタンとして「+－」を疑似要素として実装しているため、first-childで疑似クラスを追加したが、表記されず

該当のソースコード

【HTML】
 <div class="section9">
      <div class="container">
        <div class="section9__title">
          <h1>よくあるご質問</h1>
        </div>
        <div class="section9__accordion">
          <div id="section9__accordion" class="section9__accordion__container">
            <div class="section9__accordion__contents1">
              <h4 class="section9__accordion__title js__accordion__title">ダミーテキストダミーテキスト<br class="br-sp" />ダミーテキストダミーテキスト</h4>
              <div class="section9__accordion__content">
                <p>ダミーテキストダミーテキスト<br class="br-sp" />ダミーテキストダミーテキスト</p>
              </div>
            </div>
            <div class="section9__accordion__contents2">
              <h4 class="section9__accordion__title js__accordion__title">ダミーテキストダミーテキスト<br class="br-sp" />ダミーテキストダミーテキスト</h4>
              <div class="section9__accordion__content">
                <p>ダミーテキストダミーテキスト<br class="br-sp" />ダミーテキストダミーテキスト</p>
              </div>
            </div>
            <div class="section9__accordion__contents3">
              <h4 class="section9__accordion__title js__accordion__title">ダミーテキストダミーテキスト<br class="br-sp" />ダミーテキストダミーテキスト</h4>
              <div class="section9__accordion__content">
                <p>ダミーテキストダミーテキスト<br class="br-sp" />ダミーテキストダミーテキスト</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

【SCSS】
&__accordion__container &__accordion__title {
    position: relative;
    margin: 0;
    padding: 35px;
    background-color: #2196F3;
    font-size: 16px;
    font-weight: normal;
    color: #fff;
    cursor: pointer;
  }
  &__accordion__container &__accordion__title:first-child {
    content: url(img/Q..svg);
  }
  &__accordion__container &__accordion__title:first-child::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    width: 45px;
    height: 3px;
    /*縦線に*/
    transform: rotate(90deg);
    background: #fff;
    transition: all .3s ease-in-out;
  }
  &__accordion__container &__accordion__title::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 32px;
    /*横線*/
    width: 45px;
    height: 3px;
    background: #fff;
    transition: all .2s ease-in-out;
  }
  &__accordion__container &__accordion__title.open::before {
    transform: rotate(180deg);
  }
  &__accordion__content {
    padding: 35px 0 35px 88px;
    border: 1px solid #C8CCD0;
  }

試したこと

・疑似要素（::before）と疑似クラス(:first-child)を併用して実装も上手く表記されず

補足情報（FW/ツールのバージョンなど）

Answer 1

前提として、疑似要素が使用できるのは1つだけです。
そのため、以下のように「<span class="icon"></span>」などの要素を追加する方法が楽だと思います。

<h4 class="section9__accordion__title js__accordion__title"><span class="icon"></span>ダミーテキストダミーテキスト<br class="br-sp" />ダミーテキストダミーテキスト</h4>

---

補足: 「疑似要素が使用できるのは1つだけ」という点について
「複数の疑似要素」というのが、例えば::before疑似要素を2つ、3つ使用できると理解されているのなら間違いです。

「h4」「h4:first-child」の2つのセレクタを用意したからといって、
2つの::before疑似要素が使用できるようになるわけではありません。

h4 {
  color: red;
}
h4:first-child {
  color: blue;
}

例えば上記CSSのとき、h4の文字色は赤になりますよね?
「複数の疑似要素を使用したい」というのは「文字色を赤かつ青にしたい」と言っているのと同じ..、
と私は理解しています。

参考URL:
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements
(「疑似要素は1つのセレクターに1つだけ使用することができます。」とあるので、
セレクタが異なったら複数使える、と解釈できてしまう気もしますが..)

Comments

[OWTR8]

ご回答ありがとうございます。
さっそくトライしましたところ、解決しました！

独学学習中のため、まだまだ理解が浅い部分もあり、補足の説明が非常に勉強になりました。
今後ともに、よろしくお願いいたします！

[new1ro]

解決できたようで、よかったです！