ページネーションの実装（activeの場合に番号のbackground-colorを変えたい）

Question

前提・実現したいこと

ページネーションの実装について質問があります。
Current(active)ページの場合にページ番号のbackgroud-colorを変えたいと思っています。
＊１ページ目が開かれているならば１の背景色が変わるようにしたいのです。

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

色が変わりません。

該当のソースコード

 <?php
$USER = "user";
$PW = "password";  

    $dbh = new PDO('mysql:host=localhost;dbname=data;charset=utf8', $USER, $PW);
    
    // GETで現在のページ数を取得する（未入力の場合は1を挿入）
if (isset($_GET['page'])) {
	$page = (int)$_GET['page'];
} else {
	$page = 1;
}

// スタートのポジションを計算する
if ($page > 1) {
	// 例：２ページ目の場合は、『(2 × 30) - 30 = 10』
	$start = ($page * 30) - 30;
} else {
	$start = 0;
}    
        
$sql = $dbh->prepare("SELECT*FROM tableName ORDER BY alphabet ASC LIMIT {$start}, 30");
	$sql->execute();
	$result = $sql->fetchAll(PDO::FETCH_ASSOC);

// postsテーブルのデータ件数を取得する
$page_num = $dbh->prepare("
	SELECT COUNT(*) id
	FROM tableName
");
$page_num->execute();
$page_num = $page_num->fetchColumn();        
        
    
// ページネーションの数を取得する
$pagination = ceil($page_num / 30);
    

// postsテーブルのデータ件数を取得する
$sql1 = "SELECT COUNT(*) id FROM tableName";
$page_num = $dbh->prepare($sql1);
$page_num->execute();
$page_num = $page_num->fetchColumn();        
        
?>
        <h1>CLIENT LIST</h1>
      
	<table>
		<tr>
		<th>ID</th>
		<th>COMPANY</th>
		<th>NAME</th>
         		</tr>
		
		<?php foreach($result as $row){?>
	        <tr>
		<td><?=$row['id'] ?></td>
		<td><?=$row['company']?></td>
	        <td><?=$row['name']?></td>
		</tr>
		<?php } ?>
		</table>

        <!-- ページネーション -->
        <?php for ($x=1; $x <= $pagination ; $x++) { ?>
        <ul class="pagination">
        <li><a id="page" href="?page=<?php echo $x ?>"><?php echo $x; ?></a></li></ul>
<?php } // End of for ?>
*四角で囲まれた番号１～８までが表示されます。

◆CSS
ul.pagination li a.active{
    background-color: #ddd;
}

＊ちなみに以下のコードはすべて機能しています。
ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

ul.pagination li {display: inline;}

ul.pagination a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}

ul.pagination li a:hover{
    background-color: #ddd;
}

試したこと

ul.pagination li　a:active {
backgroud-color:#ddd;
}
などいろいろやってみました。
よろしくお願いいたします。

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

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

Comments

[m.ts10806]

どこにも現在ページの判定が入っていないようですが。

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

CSSではなくPHPの問題です。
タグも追加しておいてください。

Answer 1

PHP詳しくないので、間違えていたらすみません。

    <style>
        a[href="?page=<?=$_GET['page'] ?>"]{
            background-color: #ddd;
        }
    </style>

なるべくCSSの範囲で何とかする方法を書きましたが、小手先感が否めないです。

m.ts10806さんが補足依頼でおっしゃっているとおり、PHPで現在ページの要素にクラスをつけるなどする方がいいだろうと思います。

Comments

[fuku-to-mako]

うまくいきました！！本当にありがとうございました。CSSもですが、PHPももっと勉強が必要だと感じています。