I've been attempting to modify some CSS for a specific Wordpress page by adding .page-id-# before the new CSS rule, but for some reason, it's not working. I've tried various selectors, using !important, switching browsers, checking the ID, and testing on different pages, but the custom CSS doesn't seem to load.
For example, in the code snippet below, the text on page 2 should be blue instead of red, but the custom CSS isn't loading properly, so it remains red. Am I overlooking something obvious?
Page 1 -------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body>
<div class="change_colour">Hello</div>
<div>
<a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>
</body>
</html>
Page 2-----------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
<meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
<link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
<?php
wp_head();
?>
</head>
<body>
<div class="change_colour">Hello</div>
</body>
</html>
CSS------------------------
/*
Theme Name: Testing
Text Domain: Testing
Version: 1.0
Decription:
Tags:
Author: Jonny
*/
.change_colour {
color: red;
}
.page-id-2 .change_colour {
color: blue;
}