CODEWITHSUNDEEP
htmlcsscss-selectors
Shrugo
Shrugo

Reputation: 157

Why is the css nth-child doesn't work for the last second element?

In the example below it is the 4th element which is not aligned according to the css.

$( "span" ).each(function( index ) {
  
  $(".edit").append('<input class="inputtext" type="text" value="' + $(this).text() +
	'" name="'+index+'" id="input_'+$(this).attr("id")+'"/></br>');
  });

  
  $('.inputtext').on('keyup',function(){
    var abc = $(this).val();
    console.log(abc);
   	var id= $(this).attr('id').split('_')[1];
    $('#'+id).text(abc);
});
.editable:nth-child(1) {
  top:10px;
  left:50px;
}

.editable:nth-child(2){
  top:30px;
  left:50px;
}
  
.editable:nth-child(3) {
  top:60px;
  left:50px;
}

.editable:nth-child(4) {
  top:90px;
  left:50px;
}

.editable:last-child {
  top:120px;
  left:50px;
}

.text {
  color:#FFFFFF; 
  background-color:black;
  position:absolute;
  padding:5px;
}

.photoStyle {
  height:500px;
  width:600px;
}

.edit {
  border:2px solid black;
  width:600px;
}

.inputtext {
  height:25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />
   
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
</div>

<div class="edit"></div>

Upvotes: 0

Views: 924

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105903

If you do not know the position of your elements, you can use :nth-of-type(x) to select them.

here :nth-child(1) refers to the image :)

.editable {
  left:50px;
 }

.editable:nth-of-type(1) {
  top:10px;
}

.editable:nth-of-type(2){
  top:30px;
}
  
.editable:nth-of-type(3) {
  top:60px;
}

.editable:nth-of-type(4) {
  top:90px;
}

.editable:nth-of-type(5) {
  top:120px;
}

.text {
  color:#FFFFFF; 
  background-color:black;
  position:absolute;
  padding:5px;
}

.photoStyle {
  height:500px;
  width:600px;
}

.edit {
  border:2px solid black;
  width:600px;
}

.inputtext {
  height:25px;
}
<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />
   
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
</div>

<div class="edit"></div>

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65806

You aren't taking the img element, which is the 1st-child in that group, into account. Adjust your numbers by one and it works. 

$( "span" ).each(function( index ) {
  
  $(".edit").append('<input class="inputtext" type="text" value="' + $(this).text() +
	'" name="'+index+'" id="input_'+$(this).attr("id")+'"/></br>');
  });

  
  $('.inputtext').on('keyup',function(){
    var abc = $(this).val();
    console.log(abc);
   	var id= $(this).attr('id').split('_')[1];
    $('#'+id).text(abc);
});
.editable { left:50px; }
.editable:nth-child(2) { top:10px; }
.editable:nth-child(3) { top:30px; }
.editable:nth-child(4) { top:60px; }
.editable:nth-child(5) { top:90px; color:yellow;}
.editable:last-child { top:120px; }

.text {
  color:#FFFFFF; 
  background-color:black;
  position:absolute;
  padding:5px;
}

.photoStyle {
  height:500px;
  width:600px;
}

.edit {
  border:2px solid black;
  width:600px;
}

.inputtext { height:25px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />
   
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
</div>

<div class="edit"></div>

You could also wrap just the <span> elements in their own <div> and keep all the numbers as they were and it would work since the img would no longer be a child in that group.

<div class="menu">
    <img src="http://bloximages.newyork1.vip.townnews.com/stltoday.com/content/tncms/assets/v3/editorial/8/12/8126e948-17fe-5102-b12f-908660e0f7e4/57d981d98e495.image.jpg?resize=1200%2C679" class="photoStyle" />

  <!-- By wrapping all the spans in their own div, the numbers work as expected. -->
  <div>
    <span class="text editable" id="t1">1</span> 
    <span class="text editable" id="t2">2</span> 
    <span class="text editable" id="t3">3</span> 
    <span class="text editable" id="t4">4</span> 
    <span class="text editable" id="t5">5</span> 
  </div>
</div>

Upvotes: 1

andi
andi

Reputation: 6522

That 4th .editable span doesn't match any of your CSS selectors, because it is actually the 5th child of its parent. The img element is the first child there.

If you wanted to redo this so it only depends on the other .editable elements, you could do:

.editable {top:10px; left:50px;}
.editable + .editable {top:30px;}
.editable + .editable + .editable {top:60px;}
.editable + .editable + .editable + .editable {top:90px;}
.editable + .editable + .editable + .editable + .editable {top:120px;}

using the + (adjacent sibling selector).

Upvotes: 0

Lee
Lee

Reputation: 3101

It's working correctly. The rule is saying, an element with class of editable that is the 4th element under the parent. The first child is the img, not the first span.

Upvotes: 2

Related Questions