How to find elements with a specific ID or class on the web?

  • Resolved michalrama

    (@michalrama)


    1 month, 2 weeks ago

    Hello,

    I wanted to create comments on my custom CSS code.

    The problem is that it’s been a while and it’s not always clear from the id/class name what it refers to. Especially when it’s my own and not some plugin or theme.

    That’s why I couldn’t even find some.

    There is an option to explore the web and find the desired element with the id/class (either using an online tool or a plugin)

    Please help

    Thank you

Viewing 4 replies - 1 through 4 (of 4 total)

  • I’m not quite sure if I’ve understood you correctly. If you want to find an ID or class of an element in the source code of the frontend of your website, then I would recommend using the developer tools of your browser. See also “Step 3” here: https://developer.www.ads-software.com/advanced-administration/debug/debug-javascript/ – refers to the JavaScript console, but this is part of the developer tools nowadays.

    Moderator bcworkz

    (@bcworkz)

    Browser tools are effective for finding something on the current page. Not so much for finding something anywhere on your site.

    If the ID/class you’re looking for is part of post content, such as if you used the advanced meta box to add custom anchor ID or classes, you can use the default WP search capability. For example: example.com?s=foo will find all posts and pages with “foo” in them, including those with foo as class or ID attributes.

    If the class or ID was dynamically generated, the WP search will not help, but you could use Google’s “site:” search modifier to search your site for a particular word. For example foo site:example.com. In my own testing, this will find ID and class attribute values; however, it’s not reliable for finding all occurrences on your site. But maybe it’ll at least find the page you’re looking for.

    Website scraping tools might be able to find all occurrences of a specific word. I’m not sure, I’ve not used such tools myself.

    I believe you already have your custom css added, now you just need to add comments to make it clear to your future self, then the easiest way is the search for the ID in browser developer tools.

    If I understand you correctly, then here’s how to do it.

    • Go go the page where it has your IDs.
    • Press Command + Option + I ( Ctrl + Alt + I if you’re on windows ) to open the developer tools.
    • Go the Elements tab.
    • And press Command + F or (Ctrl + F for windows) and search for the IDs you’re looking for.
    Thread Starter michalrama

    (@michalrama)

    Hello,

    I finally solved it by viewing the source code (CTRL + U) and finding a specific ID/class in it.

    I did have to go through all the pages manually, but there aren’t many, so it didn’t take long.

    I would probably close this question with that.

    Still, thank you all for the advice.

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.