CSS nth-child - получить 1-го, 2-го, 4-го и 5-го детей сразу?

Question

С CSS3 я знаю, что могу использовать селектор nth-child(an + b). У меня есть таблица с 5 строками, и я хотел бы выбрать 1, 2, 4 и 5 строк с одним оператором. Это возможно, или я должен использовать как минимум два утверждения, как это:

:nth-child(-n+2)  /* gets 1 and 2 */
:nth-child(n+4)   /* gets 4 and 5 */

Я надеялся на такой синтаксис, как nth-child(1,2,4,5) или nth-child(1-2,4-5), но он не является частью спецификации.

(У меня нет контроля над страницей, и в этих строках нет идентификаторов / классов).

Answer 1

Если вы хотите быть явным, единственный способ - повторить :nth-child() примерно так:

tr:nth-child(1), tr:nth-child(2), tr:nth-child(4), tr:nth-child(5)

Однако, поскольку в таблице ровно 5 строк, вы можете просто исключить третью строкуи вы получите строки № 1, № 2, № 4 и № 5:

tr:not(:nth-child(3))

jsFiddle preview

Answer 2

Вы всегда можете использовать четные и нечетные ключевые слова, например:

таблица tr: nth-child (четный) или, если вы хотите, чтобы данные таблицы использовали таблицу td: nth-child (нечетный)

Answer 3

Чтобы сделать его более общим, вы можете использовать это:

tr:not(:nth-child(1n+6)):not(:nth-child(3))  { 
    /* your rules here */
}

Чтобы объяснить это немного: Вы говорите, что хотите выбрать элементы, которые не из 6 включенных (поэтому первые 5) , а не 3-й, если ты написал

 tr:nth-child(1n+6) 

вы нацеливались на строки с 5, так как вы выбирали строки

(1 * 0) + 6 [= 6]

(1 * 1) + 6 [= 7]

(1 * 2) + 6 [= 8]

... и так далее. Это то, что означает выражение (1n + X), где X в нашем случае - 6.

Добавляя псевдоселектор: not к приведенному выше выражению, вы говорите, что хотите выбрать строки, которые не из 5, поэтому вы будете выбирать из 5 вниз, 1-й, 2-й, 3-й, 4-й и 5-й.

Плюс, добавив еще один: не селектор, который нацелен на 3-го, вы получите то, что вы хотите => Первые 5 без 3-го!

/ ***************** ОБНОВЛЕНО! Я добавил jsfiddle ******************* /

Здесь вы можете увидеть, как он работает в этом jsfiddle