How To Find The ID Or Class Name For An Element To Use In Custom CSS

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.

a

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:

b

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.

c

You can edit specific styles in the sidebar.

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 Options.