ＣＳＳで装飾が混在してしまいます

Question

前提・実現したいこと

記事の見出し(h3)の装飾を記事によって変えたいです

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

エラーメッセージ

該当のソースコード

普段はこの装飾を使っていて、

.article h3 {
background: linear-gradient(to right, #5ddf78 0%, #ffffff 100%);
background-size:40% 95%;
background-repeat:no-repeat;
border-bottom:5px solid #57B196;
padding:10px 0;
padding-left: 10px;}

違った装飾を使えるようにしようと、この下に

.article h3.aabb {
position: relative;
padding: 15px 15px 10px 35px;
border: 1px solid #000;
border-radius: 5px;
}

h3::after {
position: absolute;
content: '';
top: 50%;
left: 15px;
transform: translateY(-50%);
width: 5px;
height: 25px;
background-color: #000fff;
}

を書き足して、
HTMLでは

<h3 class="aabb"> 文章 </h3>

と指定してみたのですが、「h3」の装飾と「h3.aabb」の装飾が混ざって表示されてしまいます
原因やどこがいけないのかわかりません

試したこと

初心者なので宜しくご教授願います

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

ここにより詳細な情報を記載してください。

Answer 1

まず、今回のh3要素にclass="aabb"が付いていたとしても、".article h3"に指定したスタイルは全て適用されます。（問題のh3要素はarticleクラスの要素の配下にある前提でお話ししています）
そして、".article h3.aabb"に指定されているスタイルが適用されるのですが、この時、".article h3"に指定したのと重複するものがあったときだけ、".article h3.aabb"に指定したもので上書きされるということになります。

具体的に今回どのスタイルだけを<h3 class="aabb"> 文章 </h3>に付けたいのか分からないので具体的な説明は出来ないのですが、".article h3.aabb"に指定されているスタイルのうち、付けたくないものについては".article h3.aabb"の方で上書きする必要があります。

（追記）本当なら、h3の中で、例えば色違いなど2種類用意したい場合（仮にそれぞれ'heading-primary'、'heading-secondary'というクラス名を付けるとします）

• articleクラスの下のh3要素全てに適用したいスタイルを".article h3{}"の中に記述
• '.heading-primary'だけに適用したいスタイルを".article h3.heading-primary{}"の中に記述
• '.heading-secondary'だけに適用したいスタイルを".article h3.heading-secondary{}"の中に記述

というような作りにすることが多いですね。
こうすれば上に書いた上書きのことはあまり考えなくてよくなりますが、これはこれでしっかり考えて書かないと、意図しないスタイルが適用されてしまうことにもなります。

Comments

[yawata]

返信ありがとうございます。
".article h3.aabb"の方で上書きする必要があります。とのことですが、私としては<h3 class="aabb"></h3>と書く場合、".article h3.aabb"の適用だけにしたいです。
".article h3"の内容が反映されないよう上書きするには、どのような内容コードにすればよいでしょうか？

[hallen0225]

それは、CSSというものの仕組み上不可能ということになります。（".article h3"にスタイルを指定している以上、その指定はクラス名articleの要素の下にあるh3すべてに適用されます）

（追記：「articleクラスの配下にあるh3で、クラス名が付いていないもの」という指定自体は可能なのですが、それをしてしまうと、そのh3要素の見た目を変える目的以外でclass名を付ける必要があるときに修正が必要になってしまうので、あまりいい方法ではありません。）

具体的な話は、あなたが「<h3 class="aabb">をどのような見た目にしたくて、逆にクラスが付いていないh3はどのような見た目にしたいのか分からないと答えられません。

[yawata]

CSS文法もほぼわからない初心者だったのですが、ご返答頂いた内容でヒントになり、今回、.article h3装飾の背景をグラデーションにしていて、それが混じり込んでいたので、".article h3.aabbの方で再度グラデーション指定をして装飾背景色を上書きしたら、文法的にはわからないのですが、見た目では解決したようです。
アドバイス有難う御座いました