CSS Styling a specific page

Question

I am familiar with styling specific pages on WordPress by adding a class

.page-id-123

in front of the styled element. However, this doesn't seem to apply to "subpages" (sorry don't know what they are called), when after the page, there is a specific tag (?) added.

Example:

URL: wordpressweb.com/my-account
CSS: .page-id-123 .header { background-color: yellow; }

URL: wordpressweb.com/my-account/?add-new-business=true
CSS: ??? .header { background-color: yellow; }

Is there a way to target these kind of pages with CSS?

Answer 1

That is a URL Query String. It's still the same page, not a subpage. You can access this in PHP via $_GET and you can use the body_class hook to look for this query string and add a class accordingly. WordPress won't add classes for query strings, it's not a normal thing to do.

Here's an example of how you can use the body_class hook to add an additional class based on the query string:

/**
 * Look for query string and add an additional class to the body
 *
 * @param Array $classes
 *
 * @return Array $classes
 */
function wpse352069_body_class_mods( $classes ) {

    if( isset( $_GET, $_GET['add-new-business'] ) && true == $_GET['add-new-business'] ) {
        $classes[] = 'add-new-business';
    }

    return $classes;

}
add_filter( 'body_class', 'wpse352069_body_class_mods' );

If that query string exists and IS true then it will add the add-new-business class to the body tag. You can use the CSS below to style it:

body.add-new-business .header { background-color: yellow; }