【HTML】タグの個別設定の仕方【CSS】

Question

前提・実現したいこと

テンプレートサイトより引用して作成したものになります。
同じサイトから２つほどボタンの引用をしたのですが、使われているタグが同じなため
いざ反映すると１つ目のCSSの内容が上書きされてしまいます。

下記のHTMLとCSSを独自のタグにするには
どうしたらいいでしょうか。

<div class="btn-wrap">→<div class="btn-wrap1"> などで実行しましたが、うまく反映されませんでした。

-HTML-

<div class="box9">contact ご予約、ご相談は下記よりご連絡くださいませ。 <div class="btn-copy">お気軽にお問い合わせください！</div> <div id="makelmg" class="box"> <div class="btn-wrap"><a class="btn btn-c">10:00〜18:00(水〜土曜日) <i class="fas fa-phone-volume fa-position-left"></i>03-3617-8832<i class="fas fa-angle-double-right"></i></a> </div> 不明な点など、ご相談・ご質問お答えいたします。 よくあるご質問(FAQ)にまとめてありますので、合わせてご覧ください。 </div> </div>

-CSS-
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}

html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-size: 62.5%;
}

.btn,
a.btn,
button.btn {
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #f58ca6;
border-radius: 0.5rem;
}

.btn-wrap {
margin: 30px 0;
}

a.btn-c {
font-size: 2.2rem;

position: relative;

padding: 0.25rem 2rem 1.5rem 3.5rem;

color: #fff;
background: #f58ca6;
-webkit-box-shadow: 0 5px 0 #f58ca6;
box-shadow: 0 5px 0 #f58ca6;
}

a.btn-c span {
font-size: 1.5rem;

position: absolute;
top: -10px;
left: calc(50% - 150px);

display: block;

width: 300px;
padding: 0.2rem 0;

color: #f58ca6;
border: 2px solid #f58ca6;
border-radius: 0.5rem;
background: #fff;
-webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

a.btn-c:hover {
-webkit-transform: translate(0, 3px);
transform: translate(0, 3px);

color: #fff;
background: #f58ca6;
-webkit-box-shadow: 0 2px 0 #f58ca6;
box-shadow: 0 2px 0 #f58ca6;
}

a.btn-c:hover:before {
left: 2rem;
}
.body .btn-wrap {
border-color: transparent;
font-size: 16px;
text-align: center;
}

/お気軽にお問い合わせください/
.entry-content>*, .demo .entry-content p {
text-align: center;
}

/お問い合わせボックス/
.box9 {
padding: 0.5em 1em;
margin: 2em 0;
background: #ffebe9;
border-top: solid 10px #ff7d6e;
}
.box9 p {
margin: 0;
padding: 0;
}

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

同じサイトより引用したHTML、CSSなため
同じ固定ページ内で使うと１つ目の内容が上書きされてしまう。
↓
個別の番号を振ったが、ふっている場所が違うのか反映がされない。

該当のソースコード

HTML
CSS

試したこと

思い当たる箇所に「1」などの数字を振りました。

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

どなたか助けてください。

Comments

[maisumakun]

「独自のタグ」にするとは、具体的にどうしたいのでしょうか？

[Ayano_319]

クラスで指定しているタグが全く同じなため
CSSで指定したときに、２つに反応してしまい、上書きをされてしまい困っています。

HTMLを変更した場合
CSSのどの部分を変更したらいいのか教えていただけますと、勉強になります。

[maisumakun]

> クラスで指定しているタグが全く同じなため

<div>を使うしかない以上、変えられません（原則、勝手に新しいタグを作ってはいけません）。

Answer 1

<div class="btn-wrap">→<div class="btn-wrap1">

などで実行しましたが、うまく反映されませんでした。

ボタンというのがピンク色の角丸の部分ことなら、<a class="btn btn-c">の方に設定されてますので、こちらの方のクラスを変更してください。

例えば、<a class="btn btn-x"> とでも変更して、CSSは下記のように。

a.btn-x {
   /* ここにお好みの設定を記述 */
}

Comments

[Ayano_319]

ありがとうざいます。

ちなみになのですが、全体的にクラスを変更したいのですが、HTMLを変更した際に
CSSのどの部分を変更したらいいか教えていただけますでしょうか。

今後の参考にしたいので、お手数おかけいたしますが、教えていただけると嬉しいです。

[hatena19]

とりあえず「CSS セレクター」をキーワードにWEB検索して解説ページで学習してください。

そのうえで、分からない点を HTML と CSS を提示して具体的に質問してください。

[Ayano_319]

ありがとうございます。

うまく行きました！