How To Find The ID Or Class Name For An Element

The browser inspector is a browser feature that allows you to view specific snippets of a webpage element’s HTML and CSS. You can isolate specific elements or tags and view the corresponding CSS styles to easily test changes and copy the code for customization. All webkit browsers come with an inspector built in. For best results, do not use IE to build or test customizations.

Using Inspect Element In The Browser

If you have a webkit browser such as Chrome, Firefox, Safari or Opera, Inspect Element is available from the context menu and will popop a panel in your browser showing you the markup on the left and styles on the right (shown here in Chrome). You may also access additional enhanced inspectors via Extensions for Chrome, or via the Firebug plugin for Firefox.

Selecting a specific element (each shown on their own row) in the HTML window on the left, such as the “li”, will highlight the element in the preview to assist you in determining what is what:

To select specific elements, you can either right-click them in the preview pane, or left-click the code in the left-hand inspector window.

The CSS styles for each element are shown on the right side, with the most dominant selector (the .class-name or #id-name) shown first.

Testing Changes

You can edit specific styles in the sidebar, or view the stylesheet to see all relates styles by clicking the link to the far right:

Changes you make will take effect immediately to help you test and preview them. This also helps you grab the correct style selector.

To make permanent changes, copy the new/edited styles into your theme’s Custom CSS box in Theme Settings.

Grabbing Page-Specific Selectors

If you want to restyle a common element on a specific page, such as links, borders or fonts, you will need to target the page by its unique ID so the browser knows to apply your styles to just that page. Thankfully, WordPress assigns a unique “class” to the body element of your pages to make this easier.

If you right-click the page and choose “View Source” or use the Inspector to view the HTML/source code area, locate the “body” element to view its class names:

In this example, the selector for this page is “page-id-82”. We could also use “page-template-fullwidth-php” to affect ALL pages using the full-width page template, but we want ONLY this page.

Using the selector in Custom CSS

Say you wanted to hide the top bar on just this page. Using the above selector in combination with the normal style for the title banner, you can do that:

.page-id-82 #geekmag-topbar{display: none;}

If you wanted to make the background/content area a different color on just this page:

.page-id-82 #geekmag-topbar{background: #666699;}

IF YOU NEED HELP FOR CUSTOMIZATION CLICK HERE…