Finding correct css selector

  • professorpitfire

    (@professorpitfire)


    7 years, 11 months ago

    Hi all!

    I have blogged with wordpress on and off for several years but I am new to editing them properly using CSS.

    I am currently creating a website for a company that I’m starting and hence want it to look somewhat serious. I am using the Goran theme and have created a grid page displaying the services I am offering.

    I have a few pictures on the page that are quite light and therefore sort of “blend” in to the light background. I want to keep the light background, and so I want to add a border around the images.

    I have figured out (I think) what code to use and how to add it, but not what I am supposed to add it to!?

    the “a class” for the images I want to border is “post-thumbnail” so I tried

    “post-thumbnail {
    border: 1px solid black
    }”

    with no result. The specific image’s name seems to be img.attachment-edin-thumbnail…, so I tried the same thing as above for img.attachment but that doesn’t seem to be a selector at all. I also tried doing it for img but nothing happened.

    I suspect that it is a simple issue and would really appreciate some pointers! Thank you in advance!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Leland Fiegel

    (@lelandf)

    7 years, 11 months ago

    When you’re targeting a class, it needs to be prefixed with a period. So instead of:

    post-thumbnail {
border: 1px solid black
}

    it should be:

    .post-thumbnail {
border: 1px solid black
}

    You were on the right track with img.attachment (the period is included), but it looks like you left off the rest of the class -edin-thumbnail.

    I’d suggest reading up a bit more about CSS. You can start with this article about CSS specificity on Mozilla.org.

    Thread Starter professorpitfire

    (@professorpitfire)

    7 years, 11 months ago

    Thank you for your help Leland! Adding a dot before post-thumbnail did the trick! 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Finding correct css selector’ is closed to new replies.