HTML+CSS summaryの画像を個々に設定したい

Question

detailsを2つ用意してsummaryにそれぞれ別の画像を設定したいと考えてます
下記コードでは、できませんでした
どのように書いたら別々の画像を設定することができますでしょうか？
詳しい方教えていただけないでしょうか？

ダメだった書き方コード

summary:parent1:before {
  content: url("親1用の画像");
  width: 16px;
  height: 16px;
  background-color: deepskyblue;
}

summary:parent2:before {
  content: url("親2用の画像");
  width: 16px;
  height: 16px;
  background-color: deepskyblue;
}

<details style="width:15%;height:50px;float:left">
<summary style="height:100%" class="parent1">親1</summary><!-- この部分の画像を個々に設定したい -->
<div class="details-content" style="height:100%;width:100%">
<div style="width:100%;height:1000%;background-color:red">

<details style="width:100%;height:100px">
<summary style="height:100%">子1</summary>
hello
</details>

</div></div>
</details>


<details style="width:15%;height:50px;float:left">
<summary style="height:100%" class="parent2">親2</summary><!-- この部分の画像を個々に設定したい -->
<div class="details-content" style="height:100%;width:100%">
<div style="width:100%;height:1000%;background-color:red">

<details style="width:100%;height:100px">
<summary style="height:100%">子2</summary>
hello
</details>

</div></div>
</details>

<style>
body,html {
  height:100%;
}
summary {
  position: relative;
  display: block; /* 矢印を消す */
  padding: 10px 10px 10px 30px; /* アイコンの余白を開ける */
  cursor: pointer; /* カーソルをポインターに */
  font-weight: bold;
  background-color: green;
  transition: 0.2s;
}
summary:hover {
  background-color: skyblue;
}
summary::-webkit-details-marker {
  display: none;　/* 矢印を消す */
}

/* 疑似要素でアイコンを表示 */
summary:before,
summary:after {
  content: "";
  margin: auto 0 auto 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}
summary:before {
  content: url("親1用の画像");
  width: 16px;
  height: 16px;
  background-color: deepskyblue;
}
summary:after {
  left: 6px;
  width: 5px;
  height: 5px;
  border: 4px solid transparent;
  border-left: 5px solid white;
  box-sizing: border-box;
  transition: .1s;
}

/* オープン時のスタイル */
details[open] > summary {
  background-color: yellow;
}
details[open] > summary:after {
  transform: rotate(90deg); /* アイコンを回転 */
  left: 4px; /* 位置を調整 */
  top: 5px; /* 位置を調整 */
}

/* アニメーション */
details[open] .details-content {
  animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
</style>

Answer 1

summary:parent1:before {
上記を下記に修正
summary.parent1:before {

クラスのセレクタはクラス名の前に.を付ける。

parent2も同様に。

Answer 2

こういうことでしょうか。

.parent1::before {
	content: url("image1.gif");
}

.parent2::before {
	content: url("image2.gif");
}