Title: Identifying the right CSS class
Last modified: August 25, 2020

---

# Identifying the right CSS class

 *  [eyeghoti](https://wordpress.org/support/users/eyeghoti/)
 * (@eyeghoti)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/identifying-the-right-css-class/)
 * I’m struggling to identify the right CSS classes for elements within a page.
   (
   I’m using Firefox.)
 * Scrolling down to Coaching Team in page listed, under each photo is a short biog
   which I’d like in white. By default the color is #333.
 * Right clicking on the text and selecting Inspect Element, gets the following:
 *     ```
       .layout-173 .element-7 {
           color: #333;
           font-size: 13px;
           font-family: ;
           margin: 5px 0;
       }
       ```
   
 * If I change #333 to #fff, it works, but if I then post
 *     ```
       .layout-173 .element-7 {
           color: #fff;
       }
       ```
   
 * into WP’s Custom CSS pane, the color doesn’t change.
 * However, I’ve found that if I right click on the text, then select the relevent
   html, and Copy CSS Selector, I get
    `div.team-content:nth-child(3)` I can’t see
   where the “:nth-child(3)” bit comes from, but if I use it to change the color
   in WP’s Custom CSS pane, the color _does_ change.
 *     ```
       div.team-content:nth-child(3) {
           color: #fff;
       }
       ```
   
 * What is it about
    `.layout-173 .element-7` that isn’t addressing the correct 
   element?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fidentifying-the-right-css-class%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

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

 *  [Vlad](https://wordpress.org/support/users/vladytimy/)
 * (@vladytimy)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/identifying-the-right-css-class/#post-13311257)
 * Hi!
    As far as I can see from the source of your page there is nothing wrong 
   with the selector you used, but my guess is that another CSS rule comes later
   in the stylesheet and overwrites your rule. I suggest trying to change the CSS
   line to this:
 *     ```
       .layout-173 .element-7 {
           color: #fff !important;
       }
       ```
   
 * Hopefully this will prevent other css rules to apply to your element.
 * Let me know if it works.
    Good luck, Vlad
 *  Thread Starter [eyeghoti](https://wordpress.org/support/users/eyeghoti/)
 * (@eyeghoti)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/identifying-the-right-css-class/#post-13316073)
 * Instat fix!
    Thanks.
 *  [Vlad](https://wordpress.org/support/users/vladytimy/)
 * (@vladytimy)
 * [5 years, 8 months ago](https://wordpress.org/support/topic/identifying-the-right-css-class/#post-13316082)
 * Glad it worked! 😊
 *  Thread Starter [eyeghoti](https://wordpress.org/support/users/eyeghoti/)
 * (@eyeghoti)
 * [5 years, 7 months ago](https://wordpress.org/support/topic/identifying-the-right-css-class/#post-13418186)
 * This fix (adding `!important` to the colour) seemes to have stopped working.
   
   Any thoughts?

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

The topic ‘Identifying the right CSS class’ is closed to new replies.

## Tags

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

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 4 replies
 * 2 participants
 * Last reply from: [eyeghoti](https://wordpress.org/support/users/eyeghoti/)
 * Last activity: [5 years, 7 months ago](https://wordpress.org/support/topic/identifying-the-right-css-class/#post-13418186)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics