Select variating position NTH child with CSS

Question

I have an item (X) in a menu that changes the position depending of the user, for example:

Regular user:

N | N | N | X | N

Admin User:

N | N | N | N | X

I need to select that item using NTH-CHILD, the item has no ID or CLASS or any fields, this needs to be done using NTH-CHILD, so using the first example to select the item in a regular user menu:

element:nth-child(4)

But this instead should work for both cases in a single selector

element:nth-child(4 or 5 will always be the same with the algorithm)

You can't have one CSS rule that targets the 4th child in some cases and he 5th child in others. You're either going to have to add a consistent marker (class or id) to the special element, or you're going to have to conditionally deliver different CSS files from your server. (Or equivalently, you'll have to style the element using JavaScript, e.g. by adding a class.) — Stephen Thomas, Apr 30 '17 at 00:33
As a follow-up, is there anything else that's different in the markup between the two cases, e.g. a class on the `` element? If so, you could use that to target the special element. — Stephen Thomas, Apr 30 '17 at 00:34
Nope, there's nothing different. I can only work with the css file. — user3306761, Apr 30 '17 at 01:49

score 1 · Answer 1 · answered Apr 30 '17 at 00:40

1

If you have the possiblity to put different classes into the body tag (or any other tag that is on a higher level) depending on the status admin/not-admin, you could adress it this way:

.user-page ... element:nth-child(4), .admin-page ... element:nth-child(5) {
   ...
}

answered Apr 30 '17 at 00:40

Johannes

64,305
18
73
130

I can't edit the page, I can only work with the CSS. – user3306761 Apr 30 '17 at 01:45

score 1 · Answer 2 · answered Apr 30 '17 at 00:47

there has to be something to differentiate the regular user from the admin user, usually is a class added to html or body tag, if you have that, then you could use the nth-child or nth-of-type based on the parent.

Something like this:

(used section for snippet/demo)

div {
  background: green;
  display: inline-flex
}

.regular div:nth-of-type(4) {
  /* nth-last-of-type(2) */
  background: red
}

.admin div:last-of-type {
  /* or nth-of-type(5) or nth-last-of-type(1)*/
  background: red
}

<section class="regular">
  <div>normal</div>
  <div>normal</div>
  <div>normal</div>
  <div>NOT normal</div>
  <div>normal</div>
</section>
<hr />

<section class="admin">
  <div>normal</div>
  <div>normal</div>
  <div>normal</div>
  <div>normal</div>
  <div>NOT normal</div>
</section>

Unfortunately there's no difference in the parent elements, the only difference is the extra count of menu items, I can only work with the child nodes, which has no attributes besides the item's name inside the element. — user3306761, Apr 30 '17 at 01:44

score 1 · Accepted Answer · edited May 23 '17 at 12:10

Selectors match elements based on information relayed by the markup. This information does not include text content. That's why Johannes and dippas have suggested adding the appropriate class names to the body or some other element — because that's precisely the sort of thing classes were meant for.

If your markup does not discriminate based on whether the user is a regular user or an administrator, then as far as CSS is concerned, your markup is identical in either case, and there's nothing you can do to ensure that your selector always matches the right element.

Select variating position NTH child with CSS

3 Answers3