Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

19/32 issue #188

Open
ldousset opened this issue Sep 20, 2019 · 8 comments
Open

19/32 issue #188

ldousset opened this issue Sep 20, 2019 · 8 comments

Comments

@ldousset
Copy link

In this question, the "correct" answer seems incorrect to me. The given answer selects the third-to-last bento, but there are only two bentos in the html.

I think the answer should be 'bento:nth-last-child(2)' instead of 'bento:nth-last-child(3)'.

Best
@IvanKononenko
Copy link

I dont think so. Its the 3rd element from the end, so bento:nth-last-child(3) is correct answer.

@UnoDwicho
Copy link

My bad, I forgot nth-child doesn't take in consideration the type of the element! Thanks for the reply

@ghost
Copy link

ghost commented Feb 2, 2020

I don't think bento:nth-last-child(3) can be correct here, since this selects the third last child element of bento; but there are only two bento elements. Instead, it should be bento:nth-last-child(2).
:nth-last-child(3) could also be correct, as it selects the third last child in the div, but that answer isn't allowed.

@persep
Copy link

persep commented Feb 24, 2020

bento:nth-last-child(3)

Is the correct answer as it refers to the 3rd child from the end (and) that is a bento.

bento:nth-last-child(2)

refers to the 2nd child from the end (and) that is a bento which there isn't any that matches that condition.

Here is a test case:

<!doctype html>
<html>
<head>
  <title>test</title>
  <style>
    .plate {
      height: 80px;
      background-color: lightgrey;
    }

    .bento {
      height: 50px;
      background-color: lightgreen;
    }

    .orange {
      height: 20px;
      width: 50%;
      background-color: orange;
      margin: 0 auto;
    }

    .bento:nth-last-child(3) {
      background-color: red;
    }

  </style>
</head>
<body>
  <div class="plate">Plate</div>
  <div class="bento">Bento selected with .bento:nth-last-child(3)</div>
  <div class="plate">Plate
    <div class="orange">Orange</div>
    <div class="orange">Orange</div>
    <div class="orange">Orange</div>
  </div>
  <div class="bento">Bento</div>
</body>
</html>

@mmt-code
Copy link

mmt-code commented Jun 7, 2020

bento:nth-last-child(3)

Is the correct answer as it refers to the 3rd child from the end (and) that is a bento.

bento:nth-last-child(2)

refers to the 2nd child from the end (and) that is a bento which there isn't any that matches that condition.

Here is a test case:

<!doctype html>
<html>
<head>
  <title>test</title>
  <style>
    .plate {
      height: 80px;
      background-color: lightgrey;
    }

    .bento {
      height: 50px;
      background-color: lightgreen;
    }

    .orange {
      height: 20px;
      width: 50%;
      background-color: orange;
      margin: 0 auto;
    }

    .bento:nth-last-child(3) {
      background-color: red;
    }

  </style>
</head>
<body>
  <div class="plate">Plate</div>
  <div class="bento">Bento selected with .bento:nth-last-child(3)</div>
  <div class="plate">Plate
    <div class="orange">Orange</div>
    <div class="orange">Orange</div>
    <div class="orange">Orange</div>
  </div>
  <div class="bento">Bento</div>
</body>
</html>

The code should be changed to

.bento:nth-last-child(4)

@jacobshilitz
Copy link

jacobshilitz commented Jun 22, 2020 •
edited
Loading

https://codepen.io/jacobsh/pen/ZEQegqj

@aecko-eyes
Copy link

Hi,
It works with bento:nth-child(2), but I don't understand why (I thought it should be "nth-child(1)" --> thus "first-child"), because the targeted bento is the first one, not the second (as visible in the css).
Well, I mean: @UnoDwicho said that nth-child doesn't take in consideration the type of the element, but I don't understand why bento is therefore necessary, then? If it just takes the number into account, what is the point to indicate a name? - Thanks in advance for them who are gonna answer! (:

@KQX-a7
Copy link

KQX-a7 commented Oct 27, 2020

check issue 205

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@persep @jacobshilitz @IvanKononenko @UnoDwicho @KQX-a7 @ldousset @mmt-code @aecko-eyes