Give the first picture a different class

[farzadina]

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.

[davidlab.be]

http://www.w3schools.com/cssref/sel_firstchild.asp

[farzadina]

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

 

[noahgelman]

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

[farzadina]

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

[Mottie]

Try this hack that removes p tags from around images.

[farzadina]

I removed

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

[noahgelman]

You can try using:

.post img:nth-child(0n +1)

[farzadina]

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?

[Mottie]

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.

[Mottie]

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

[farzadina]

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

[farzadina]

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.

[Author]

Posts