CODEWITHSUNDEEP
htmlcsscss-selectors
yariv bar
yariv bar

Reputation: 976

clarification for css nth-child() and nth-of-type

I'm trying to assign different background-image for each of 10 elements with employee class. the hierarchy of the HTML is as follows:

<div class="crew-row">
    <div class="employee"></div>
    <div class="employee"></div>
</div>
<div class="crew-row">
    <div class="employee"></div>
    <div class="employee"></div>
    <div class="employee"></div>
    <div class="employee"></div>
</div>
<div class="crew-row">
    <div class="employee"></div>
    <div class="employee"></div>
    <div class="employee"></div>
    <div class="employee"></div>
</div>

so i thought i can use something like this in my css:

employee:nth-of-type(1){
    background-image: url('../images/people/1.png');
}
.employee:nth-of-type(2){
    background-image: url('../images/people/2.png');
}
.employee:nth-of-type(3){
    background-image: url('../images/people/3.png');

}
.employee:nth-of-type(4){
    background-image: url('../images/people/4.png');
}
.employee:nth-of-type(5){
    background-image: url('../images/people/5.png');

}
...

or 

.employee:nth-child(1){
    background-image: url('../images/people/1.png');
}
.employee:nth-child(2){
    background-image: url('../images/people/2.png');
}
.employee:nth-child(3){
    background-image: url('../images/people/3.png');

}
.employee:nth-child(4){
    background-image: url('../images/people/4.png');
}
.employee:nth-child(5){
    background-image: url('../images/people/5.png');

}
...

but what happens is that even before i add any further code for the rest of employee they already assigned with previous background images... any idea what will be the correct way to assign different background-image to each the employee elements?

Upvotes: 0

Views: 760

Answers (4)

Salman Arshad
Salman Arshad

Reputation: 272106

The :nth-* pseudo class match elements based on their nth position with respect to their parent, not the entire document. So you can do this:

.crew-row:nth-child(1) .employee:nth-child(1) { }
.crew-row:nth-child(1) .employee:nth-child(2) { }

.crew-row:nth-child(2) .employee:nth-child(1) { }
.crew-row:nth-child(2) .employee:nth-child(2) { }
.crew-row:nth-child(2) .employee:nth-child(3) { }
.crew-row:nth-child(2) .employee:nth-child(4) { }

/* and so on */

However, I would rather get rid of .crew-row elements (they do not seem so serve a purpose other than grouping employees in separate rows) and use :nth-child to (i) assign background images (ii) push the 3rd, 7th, 11th, ... employee on to a new row.

Upvotes: 3

Khalid Hussain
Khalid Hussain

Reputation: 1694

employee:nth-of-type(1){
    background-image: url('../images/people/1.png');
}

In above code, employee:nth-of-type(1) specify a background for every <div> element with class name employee which is the first child of its parent.

So, with above code background of following div will be changed. enter image description here

This is because all red marked div is the first child of it's parent.

Upvotes: 0

reinder
reinder

Reputation: 2551

It is probably a much better idea to add separate classes like .employee-1 .employee-2 and so on. nth-child and nth-of-type only work when the elements are direct siblings of each other. So in your case they are wrapped in .crew-row and therefore nth-child(1) will select the first employee in each row...

The difference between nth-child and nth-of-type is simply that nth-of-type selects number n of a specific type. E.g.

<div class="crew-row">
    <span class="employee"></span>
    <div class="employee"></div>
    <div class="employee"></div>  <!-- trying to select this one -->
</div>


div:nth-child(2) {  } /* Not working */
div:nth-of-type(2) {  } /* Working */

If you still want to work with nth-child you can do it like this:

.crew-row:nth-child(1) .employee:nth-child(1) {} /* select first employee in first row */
.crew-row:nth-child(1) .employee:nth-child(2) {} /* select second employee in first row */
.crew-row:nth-child(2) .employee:nth-child(1) {} /* select first employee in second row */
/* and so on */

but again, probably better to just add classes .employee-[n] and assign backgrounds to these classes

<div class="employee employee-1"></div>
.employee.employee-1{
    background-image: url('../images/people/1.png');
}

Upvotes: 0

Thinh Nguyen
Thinh Nguyen

Reputation: 392

I think you will have to use jquery's "each" function

$('.employee').each(function(index) {
  var i = index % 5;
  if (i == 0) {
    $(this).css("background-color", "#ff0000");
  } else if (i == 1) {
    $(this).css("background-color", "#00ff00");
  } else if (i == 2) {
    $(this).css("background-color", "#0000ff");
  } else if (i == 3) {
    $(this).css("background-color", "#ffff00");
  } else if (i == 4) {
    $(this).css("background-color", "#00ffff");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="crew-row">
  <div class="employee">1</div>
  <div class="employee">2</div>
</div>
<div class="crew-row">
  <div class="employee">3</div>
  <div class="employee">4</div>
  <div class="employee">5</div>
  <div class="employee">6</div>
</div>
<div class="crew-row">
  <div class="employee">7</div>
  <div class="employee">8</div>
  <div class="employee">9</div>
  <div class="employee">10</div>
</div>

Upvotes: 0

Related Questions