Home/ Questions/Q 7650779
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T11:20:24+00:00

i have simple html within it i have one parent div and its have

  • 0

i have simple html within it i have one parent div and its have 3 child div, every child contains a same headinig tag “h3” i want to add 10px padding in h3 tag excluding first tag without interact with html. for example first h3= padding top=0; second h3= padding top=10px; third h3= padding top=20px;

<style>

.main { width:980px; margin:0 auto; border:solid 1px #F00; overflow:hidden}

.box { width:300px; float:left; margin-right:20px; background:#00F; height:200px;}


</style>

<script type="text/javascript" src="jquery/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(function(){
    //code

    })

</script>

</head>

<body>
<div class="main">
<div class="box"><h3>first</h3></div>
<div class="box"><h3 style="padding-top:10px;">second</h3></div>
<div class="box"><h3 style="padding-top:20px;">third</h3></div>

</div>

</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use the :not and :first selectors:

    $('.main h3:not(:first)').css('paddingTop', '10px');​

    Demo: http://jsfiddle.net/ambiguous/f3fmC/

    If there are other <h3>s in .main and you’re only interested in those inside .box, then adjust the selector:

    $('.main .box:not(:first) h3').css('paddingTop', '10px');​

    Demo: http://jsfiddle.net/ambiguous/DYTmL/

    And if you want to use an increasing padding-top, iterate through the <h3>s with each:

    $('.main h3:not(:first)').each(function(i) {
    $(this).css('paddingTop', (i + 1) * 10);
});​

    Demo: http://jsfiddle.net/ambiguous/QuyWj/

    Or simpler:

    $('.main h3').each(function(i) {
    $(this).css('paddingTop', i * 10);
});​

    Demo: http://jsfiddle.net/ambiguous/YAYJw/

    • 0