Forums

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.

springlab

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:

<style>
.post p:first-child{
Some custom classes for my first <p> tag.
}
</style>

<body>
<div class="post">
<span>Some texts is in it</span>
<p><img src="" alt=""></p> <!-- I want to give this <p> a different class -->
<p><img src="" alt=""></p>
</div></body>

noahgelman

try:

<style>
.post p:first-child img {
  //
}
</style>

: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

<script>
$(function(){
  $('.home-post-wrap img:first').addClass('first-image');
});
</script>

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

cnwtx

How about p:first-of-type?

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.

cnwtx

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

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.

treehouse : what would you like to learn today?

Forums

[Solved] Give the first picture a different class