Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Back End Give the first picture a different class

  • This topic is empty.
Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #35845
    farzadina
    Participant

    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.

    #93436
    davidlab.be
    Participant
    #93471
    farzadina
    Participant

    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




    #93473
    noahgelman
    Participant

    try:

    :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

    #93482
    farzadina
    Participant

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

    #93483
    Mottie
    Member

    Try this hack that removes p tags from around images.

    #93543
    farzadina
    Participant

    I removed

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

    #93573
    noahgelman
    Participant

    You can try using:


    .post img:nth-child(0n +1)
    #93602
    farzadina
    Participant

    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?

    #93610
    Mottie
    Member

    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.

    #93615
    Mottie
    Member

    @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.

    #93616
    farzadina
    Participant

    @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.

    #93599
    farzadina
    Participant

    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 13 posts - 1 through 13 (of 13 total)
  • The forum ‘Back End’ is closed to new topics and replies.