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 to see the link]

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

  • 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

    (@eyeghoti)

    Instat fix!
    Thanks.

    Glad it worked! ??

    Thread Starter eyeghoti

    (@eyeghoti)

    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