Treehouse: Grow your CSS skills. Land your dream job.

Give the first picture a different class

  • # December 27, 2011 at 6:40 am

    In WordPress, How to give the first picture of the post a different class?
    I want to make the first picture of my post a different style.

    # December 27, 2011 at 3:51 pm

    Yea, that’s good. But I have some before my

    , so that method doesn’t worked there. Here is my code:

    Some texts is in it

    # December 27, 2011 at 3:59 pm


    :first-child grabs the first of the selected element, not the first thing inside of it. so p:first-child grabs the first ‘p’, not the first thing inside it

    # December 27, 2011 at 4:36 pm

    I used that method, that doesn’t worked. Please see Here, what is wrong?

    # December 27, 2011 at 4:40 pm

    Try this hack that removes p tags from around images.

    # December 28, 2011 at 1:34 pm

    I removed

    tags from around images, now what method I should use?
    .post img:first-child{} doesn’t worked.

    # December 28, 2011 at 6:57 pm

    You can try using:

    .post img:nth-child(0n +1)
    # December 29, 2011 at 3:51 am

    I tried that, but doesn’t worked. See Here. I want to give that style to the first image in the .home-post-wrap DIV. I put that code in my style-Red.css and nothing changed. What’s wrong?

    # December 29, 2011 at 9:41 am

    Well… I tried this, and it worked, but I don’t think it’s the best solution because the markup could change and the image may not be the 5th child:

    .home-post-wrap img:nth-child(5) { }

    I think the best solution, since you’re using jQuery, would be to use script

    Then just add whatever css using the “first-image” class.

    # December 29, 2011 at 9:46 am

    How about p:first-of-type?

    # December 29, 2011 at 10:17 am

    @cnwtx Hey that does work! LOL I never knew there was a psuedo selector like that!

    .home-post-wrap img:first-of-type {
    border: #f00 3px solid;

    Edit: Oh I see, no coverage for IE8 and below… not sure about IE9 IE9 supports it.

    # December 29, 2011 at 10:22 am

    @Mottie, Yea, I tried the first solution and that worked, but as you said, that may change in some posts, for example when I put a video at the first of my post.
    I used jQuery solution and that worked great, Thanks!

    @cnwtx, I haven’t

    tag around my images, so I changed that code to img:first-of-type and that worked in most of my posts, but in some of them I saw

    tag around my images and there the solution doesn’t worked.

    @noahgelman, Thank you so much for the helps.

    # December 29, 2011 at 10:31 am

    @Mottie There’s also :nth-of-type(n) :nth-last-of-type(n) and :last-of-type selectors.

    @farzadina what about this: img:first-of-type, p:first-of-type?

    # December 29, 2011 at 12:05 pm

    I tried img:first-of-type, p:first-of-type, that give the first image, first

    tag and the first images in

    tags, a different class.
    I used that jQuery method and that work great. It is good to use a pure CSS method, but if not, there is no problem.

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.