CSS別の「.〜〜〜」を実行する

Question

#例

<button type"button" class="a_button">
    <img src="〇〇〇〇.png" width="〇〇" height="〇〇"</img>

このボタンを押されて

.a_button:active{
}

が実行された時に

.b{
   width:10;
}

.a_button:active{
}

.bが実行されるようにしたい
##ん？どゆこと？？
全く関係のないボタンで全く別の物の見た目を変えたい。

You Tubeで例えると、動画に高評価ボタンを押した時に、画面左上にあるYou Tubeアイコンが別の画像に変わる みたいな事がしたい

.a_button:active{
に何か書けばいいのか？と考えていますが、
}

.〜〜〜{
}
↑
の名称が分からず、検索することも出来ないので困っています。

cssで別の.〜〜〜を動かす方法を教えて下さい。

Comments

[nanami12]

まずは、第三者が読んでわかる様な質問がおこなえるくらいの
スキルを身につけてください。
質問内容が幼稚すぎます。

Answer 1

動画に高評価ボタンを押した時に、画面左上にあるYou Tubeアイコンが別の画像に変わる みたいな事がしたい

CSSだけではなくJavaScriptが必要です。
場合によってはサーバーサイドの言語、DB

の名称が分からず

• .で始まってたらクラス
• #で始まってたらID
• 何もなければHTMLタグ

総合的には「セレクタ」と呼ばれます。

Answer 2

.aに対して後方に.bがあるなら

.a:active{color:red}
.b{background-Color:yellow;width:100px}
.a:active ~ .b,.a:active ~ * .b{background-Color:lime;width:50px}

• CodePen