:nth-of-type(odd) getting non-targeted elements

Asked Mar 07 '18 at 01:20

Active Mar 07 '18 at 01:20

Viewed 21 times

I'm making a list, and I'm using :nth-of-type(odd) to give the odd ones a background.

.item {
  padding: 8px 8px;
  margin: 0px 0;
}
.item:nth-of-type(odd){
  background: #fff;
}

HTML

<p class="text-right">
  <small>
    <a href="./?action=edit">Edit Info</a>
  </small>
</p>
  <p class="item">
    <b>Name</b>
    <span class="value"><?= $user["f_name"]; ?> <?= $user["l_name"]; ?></span>
  </p>
  <p class="item">
    <b>Email</b>
    <span class="value"><?= $user["email"] ? $user["email"] : "-"; ?></span>
  </p>
  <p class="item">
    <b>Phone</b>
    <span class="value"><?= $user["phone"] ? phone_format($user["phone"]) : "-"; ?></span>
  </p>

When I tried this, the first p (with .text-right) was included in the :nth-of-type so that the first .item was counted as second.

I managed to fix it by wrapping the .items in a div, but this won't work with my layout. Is there a way that I can do this while still having all of the ps in the same parent container?

asked Mar 07 '18 at 01:20

yaakov

4,568
4
27
51

2

`nth-of-type` refers to the element, not the class. – sol Mar 07 '18 at 01:25
What do you mean? – yaakov Mar 07 '18 at 01:26
The first `p` in the target classes scope? – yaakov Mar 07 '18 at 01:28
Because if not then if I had something like `#container div:nth-of-type(odd)`, it would get every div, regardless of whether it's in `#container` or not. – yaakov Mar 07 '18 at 01:30
What outcome do you want? – sol Mar 07 '18 at 01:32

:nth-of-type(odd) getting non-targeted elements

0 Answers0