I want to nth-child to resize image and text title, nth-child work perfectly for image thumb but not for text title. Can anyone help me where iam wrong? Thank you in advance.
<div id="programet" class="shadow">
<a href="/category/vendi" class="sfond_vendi">LAJME</a>
<?php
global $post;
$args = array( 'numberposts' => 22, 'order' => 'ASC', 'category' => 9 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post); ?>
<div id="lajme-bllok-item-vogel">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('lajmi-thumb'); ?></a>
<div id="lajme-bllok-item-title-vogel"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></div>
<div id="top-news-title-linku"><?php for( $i=1; $i<=4; $i++){ $prop_det_url = get_field('link'.$i); if( $prop_det_url != '' ){ ?>
<a href="<?php echo $prop_det_url; ?>" target="_blank">/ <?php the_field('link_titull'.$i); ?></a> <?php } } ?></div>
</div>
<?php endforeach; ?>
</div>
#lajme-bllok-item-vogel:nth-child(3n+1){width:auto;height:auto;float:left;margin:0 0 0 0;padding:25px 10px;border-bottom:1px solid #ddd;}
#lajme-bllok-item-vogel:nth-child(3n+1) img{height:219px;width:390px;border-top:2px solid #F00;box-shadow:0 0 10px rgba(0, 0, 0, 0.5);}
#lajme-bllok-item-title-vogel:nth-child(3n+1) {width:368px;height:auto;margin:-6px 0 0 0;padding:11px;box-shadow:0 0 10px rgba(0, 0, 0, 0.5);font:21px/23px 'lato-bold',Arial,'Helvetica Neue',Helvetica,sans-serif;font-size:21px;font-weight:bold;}
#lajme-bllok-item-title-vogel:nth-child(3n+1) a:hover{color:#01628F;}
Its because you’re iterating the top level item and should be applying
nth-childselection to this, however your CSS is applyingnth-childselection to its child instead. You want to change your selector to the below.Change:
To
Incidentally, it also looks like you are duplicating your
idtags, you should avoid this-idattributes must be unique.