アップロードファイルの数によってCSSを変化させたい

Question

実現したいこと

Q＆A掲示板に最大3件のファイルアップロード機能を付けているのですが、ファイル1件またはファイル2件の時とファイル3件の時でデザインを変更したいと考えております。

発生している問題・分からないこと

PHP で CSS を分岐させるにはどのように書けばよいでしょうか？

該当のソースコード

<?php
$unique_id =substr($_SERVER['REQUEST_URI'], -36);
$sql ='SELECT * FROM sortable WHERE unique_id = %s';
$query =$wpdb->prepare($sql, $unique_id);
$rows =$wpdb->get_results($query);
// アップロードディレクトリ（パス名）を取得する
$upload_dir =wp_upload_dir();
echo '<div class="main_container">';
echo '<div class="quest_container">';

foreach ($rows as $row) {
    $files =array_filter([$row->attach1, $row->attach2, $row->attach3]);
    $views =[]; //ＨＴＭＬをため込む配列の初期化する

    foreach ($files as $file) {
        $info =pathinfo($file);
        $attach_url =$upload_dir['baseurl'] . '/attach/' . $info['basename'];
        $ext =$info['extension'];

        switch ($ext) {
            case 'jpeg':
                case 'png': $views[]='<img style="height:350px;width:530px" src="' . $attach_url . '">';
            break;
            case 'mp4':
                $views[]='<video style="height:350px;width:530px" src="' . $attach_url . '">';
            break;
            case 'pdf':
                $views[]='<iframe style="height:350px;width:530px" src="' . $attach_url . '"></iframe>';
            break;
            default:
                break;
        }
    }

    $count =count($views);

    if ($count ==1) {
        // 1がtrueの場合
        // ここの処理が実行される
        $bmfloatLeft ='left'; // 画像が2つの場合のみ
    }

    elseif ($count ==2) {
        // 1がfalseで2がtrueの場合
        // ここの処理が実行される
        $bmfloatLeft ='left'; // 画像が2つの場合のみ
    }

    else {
        // それ以外（1、2ともにfalse）の場合
        // ここの処理が実行される
        $buafloatLeft ='left'; // 画像が3つの場合のみ
    }

    if (empty($row->usericon)) {
        $usericon_src ='wp-content/themes/sample_theme/images/noimage.png';
    }

    else {
        $usericon_src =$upload_dir['baseurl'] . '/attach/' . $row->usericon;
    }

    // echo '<div><a href="'.$url.'">'.$row->unique_id.'</a></div>';
    echo '<div class="quest_header_title">' . mb_strimwidth($row->title, 0, 40, '･･･') . '</div>'; // タイトル30文字
    echo '<div class="quest_usericon_img"><input type="radio" name="stamp" value="' . $row->stamp . '" id="stamp"><label for="stamp" class="quest_stamp_label"></label></div>'; // スタンプ画像

    // 全体にのみ float: left;
    echo '<div class="quest_markdown">';

    foreach ($views as $view) {
        // 個別にのみ float: left;
        echo '<div class="quest_item">' . $view . '</div>'; // アップロードファイル
    }

    echo '</div>';

    echo '<div class="quest_overview">' . mb_strimwidth($row->text, 0, 40, '･･･') . '</div>'; // 質問文
    echo '<div class="quest_usericon_img"><img src="' . $usericon_src . '"></div>'; // アイコン画像
    echo '<div class="quest_username">' . mb_strimwidth($row->name, 0, 10, '･･･') . '</div>'; // 名前
}

echo '</div>'; //<div class="quest_container"> の閉じタグ
?>

/* ファイルが3件の場合 */
.quest_container .quest_item {
    float: <?php echo $buafloatLeft; ?>;
    display: inline-block;
    margin-bottom: 30px;
    padding: 0px 18px 0px 5px;
}

.quest_container .quest_overview {
    color: #e52d77;
    font-size: 150%;
    font-weight: 700;
    width: 1098px !important;
    margin-top: 25px;
}

/* ファイルが1か2件の場合 */
.image-partial {
    float: <?php echo $bmfloatLeft;?>;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

var_dump($count); でアップロードファイル数のチェックを行ったところ正確な値が表示されております。

補足

特になし

Answer 1

なんとも言えませんがアップロードされるたびにimg(サムネイル?)が増えるという仕様であれば、CSS側で場合分けもよいかも

<style>
.imgs:has(img){
  background-Color:yellow;
}
.imgs:has(img:nth-child(2)){
  background-Color:lime;
}
.imgs:has(img:nth-child(3)){
  background-Color:aqua;
}
</style>
<div class="imgs">
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1">
</div>
<div class="imgs">
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1">
<img src="https://placehold.jp/00ff00/00000/100x100.png?text=2">
</div>
<div class="imgs">
<img src="https://placehold.jp/ff0000/00000/100x100.png?text=1">
<img src="https://placehold.jp/00ff00/00000/100x100.png?text=2">
<img src="https://placehold.jp/0000ff/00000/100x100.png?text=3">
<img src="https://placehold.jp/ffff00/00000/100x100.png?text=4">
</div>