WordPress has many hooks and filters that allow us to modify its behavior or update data before it is passed to another filter.

Here's a video explanation:

How to target an element with CSS

if you're targeting an element with a specific ID (some_id) you just use

#some_id { color: red; }

if you're targeting an element with a specific css class you just use the following. The classes are separated by space

.some_class { background:red; }

How to target an element that's inside another element with CSS ?

If you want to target an element that's within a another element you separate the selectors with a space.

.parent_class .some_element { color: red; }

How to target a specific element/container on a given WordPress page?

Yes. We're getting to it. You need to add this snippet to your custom plugin or functions.php file.

It will add the necessary CSS classes to the <body> element and you can use them to target the desired element.

The css classes will depend on the page links that you've used.

/**
 * This code adds extra CSS classes to the body element. Those classes can be used to target specific elements
 * on a specific WordPress page
 * e.g. Contact form page has a slug (/contact) and an element with a class .msg
 * .contact .msg { background : green; }
 * 
 * Customizations: if you want to hire us to customize this code go to https://orbisius.com/free-quote
 * 
 * @author Svetoslav (Slavi) Marinov - https://orbisius.com
 * @see blog post link https://orbisius.com/7195
 * @license GPL
 */
function orbisius_post7195_upd_body_class($classes)
{
    if (!empty($_SERVER['REQUEST_URI'])) {
        $req_url = $_SERVER['REQUEST_URI'];
        $req_url = strip_tags($req_url);
        $req_url = trim($req_url);

        // no need for the request params ...
        if (strpos($req_url, '?') !== false) {
            $req_url = preg_replace('#\?.*#si', '', $req_url);
        }

        $req_url = trim($req_url, '/'); // no need for leading or trailing slashes

        // the $req_url should be pretty clean by now.
        // e.g. contact or services or products/product123

        $page_slugs = explode('/', $req_url);
        $req_url = str_replace('_', '-', $req_url); // let's make it consistent with dashes
        $page_slugs[] = $req_url; // let's put the full link too and not just its parts

        // sanitization and clean up
        $page_slugs = array_map('sanitize_title', $page_slugs);
        $page_slugs = array_filter($page_slugs); // rm empty elements just in case
        $page_slugs = array_unique($page_slugs); // everybody is unique

        // if using merge we may end up with multidimensional arrays and we don't want that.
        $classes = array_replace($classes, $page_slugs);
    }

    return $classes;
}

if (function_exists('add_filter')) {
    add_filter('body_class', 'orbisius_post7195_upd_body_class', 50);
}
If you need help implementing some of the steps in this howto/tutorial contact us (free estimate)

Disclaimer: The content in this post is for educational purposes only. Always remember to take a backup before doing any of the suggested steps just to be on the safe side.
Referral Note: When you purchase through a referral link (if any) on this page, we may earn a commission.
If you're feeling thankful, you can buy me a coffee or a beer