- This topic is empty.
-
AuthorPosts
-
December 27, 2011 at 6:40 am #35845
farzadina
ParticipantIn 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 7:23 am #93436December 27, 2011 at 3:51 pm #93471farzadina
ParticipantYea, 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 #93473noahgelman
Participanttry:
: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 #93482December 27, 2011 at 4:40 pm #93483December 28, 2011 at 1:34 pm #93543farzadina
ParticipantI 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 #93573noahgelman
ParticipantYou can try using:
.post img:nth-child(0n +1)December 29, 2011 at 3:51 am #93602farzadina
ParticipantI 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 #93610Mottie
MemberWell… 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 10:17 am #93615Mottie
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 IE9IE9 supports it.December 29, 2011 at 10:22 am #93616farzadina
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’ttag 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 sawtag around my images and there the solution doesn’t worked.
@noahgelman, Thank you so much for the helps.December 29, 2011 at 12:05 pm #93599farzadina
ParticipantI tried
img:first-of-type, p:first-of-type
, that give the first image, firsttag 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. -
AuthorPosts
- The forum ‘Back End’ is closed to new topics and replies.