Title: CSS Selectors
Last modified: August 30, 2016

---

# CSS Selectors

 *  [soulluciani01](https://wordpress.org/support/users/soulluciani01/)
 * (@soulluciani01)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/css-selectors-14/)
 * Hi,
 * I’m in the process of building a new site and there are a few things that are
   unclear to me. When I am in my web inspector looking for the element I would 
   like to style, how do I know what class or id to use to style that specific element?
 * For example, I am trying to change the color of the footer on my page, I inspected
   the element and I see this class `div.be-section.clearfix` I tried a bunch of
   different variations and have had no luck. I looked at the dom tree and tried
   a bunch of variations but nothing works.
 * The site is [http://iamtheram.com](http://iamtheram.com) (its a work in progress)
   I am trying to change the color of the turquoise footer background.
 * If someone could help me understand how to select classes and ids I would be 
   very greatful.
 * Thanks

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

 *  [bemdesign](https://wordpress.org/support/users/bemdesign/)
 * (@bemdesign)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/css-selectors-14/#post-6656721)
 * A brief intro to CSS selectors:
 * `div{ color: red; }` – styles all <div> html elements with red text.
 * `#main{ color: blue; }` – styles all elements with the ID of ‘main’, i.e. any
   html element with the ‘id=”main”‘. Per the standards, there can only be one element
   on the page with that ID – basically an ID should be unique on that page. But
   IDs can be reused across pages.
 * `.nav-item{ color: green; }` – styles all elements with the class of ‘nav-item’,
   i.e. any html element with ‘class=”nav-item”‘.
 * For more CSS knowledge, there’s tons of information, tutorials, and training 
   available on the internet.
 *  Thread Starter [soulluciani01](https://wordpress.org/support/users/soulluciani01/)
 * (@soulluciani01)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/css-selectors-14/#post-6656741)
 * I understand how to style elements. What I am trying to understand is when I 
   am using my web inspector to find out what element to style how do I choose the
   proper element?
 * In my example above I used what appeared to be the proper element but it didn’t
   work, I tried a ton of variations of that element and it still didn’t work.
 * When in my inspector I went to the element and changed the color in my browser
   so I know it’s the right element but when I add the CSS to my style sheet nothing
   happens.
 *  [bemdesign](https://wordpress.org/support/users/bemdesign/)
 * (@bemdesign)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/css-selectors-14/#post-6656946)
 * So to use the web inspector to select the right element – open up the developer
   tools (I’ll use Firefox as the browser example – translate to your preferred 
   browser of choice).
 * Click the ‘Pick an element from the page’ – looks like an arrow entering a box.
 * Now inside the browser window click on the item you want to inspect.
 * The item will be selected in the Inspector view (shows the source html code) 
   and to the right, it will show all the CSS styles that are being applied to that
   particular element.
 * Hope this helps.

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

The topic ‘CSS Selectors’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [html](https://wordpress.org/support/topic-tag/html/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 3 replies
 * 2 participants
 * Last reply from: [bemdesign](https://wordpress.org/support/users/bemdesign/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/css-selectors-14/#post-6656946)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics