Выбрать несколько дочерних элементов в css

Ответ 1

Вы можете разделить классы с запятой ,

.ListTaskTime tbody tr >td:nth-child(3), 
.ListTaskTime tbody tr >td:nth-child(6),
.ListTaskTime tbody tr >td:nth-child(9) {
    /* Common Styles Goes Here, Styles will apply to child 3,6 and 9 */
}

Примечание. Вам нужно проверить nth-child и определить его вручную в таблице стилей, поскольку CSS не может решить его для вас, если столбцы увеличиваются.

Если вы используете язык на стороне сервера для создания динамической таблицы, вы можете использовать такие функции, как substr(), чтобы сократить буквы.

Примечание: вам не нужно использовать >, если и до тех пор, пока у вас нет дочерней таблицы, этого достаточно. tbody tr td:nth-child(3)

Ответ 2

Это должно сделать это:

.ListTaskTime tbody tr > td:nth-child(3) a,
.ListTaskTime tbody tr > td:nth-child(5) a
{
    text-overflow: ellipsis;
    width:150px;
    display: block;
    overflow: hidden;
    word-break:keep-all;
    zoom:normal;
    line-break:normal;
    white-space:pre;
}

Использование запятой между селектором, подобным этому, позволяет вам иметь несколько селекторов, использующих один и тот же стиль. У вас может быть столько селекторов, разделенных запятыми, что вы хотите позволить другим элементам использовать один и тот же стиль.

Я мог бы добавить, что, если у вас нет противоречивого стиля на странице, использование .ListTaskTime tbody tr > td:nth-child(3) a довольно специфично и может быть упрощено до чего-то вроде .ListTaskTime td:nth-child(3) a.

Вам также может быть интересно узнать о :nth-child(even) и :nth-child(odd) или даже более сложных nth-child псевдоселекторах, таких как :nth-child(2n+3), которые могут вам помочь, если позже будет больше столбцов, которые соответствуют стилю, который будет стилизован.

Ответ 3

Если я правильно понимаю проблему, вы ищете способ выбрать только 3-й и 5-й столбец. Вот способ: td:nth-child(-2n+5):not(:first-child) или td:nth-child(-2n+5):nth-child(n+3)

(Я не уверен, используют ли "вложенные селекторы" [я только что придумал этот термин, и я не уверен, является ли он реальным), то есть :not(:first-child) быстрее, чем использование функциональной нотации, т.е. :nth-child(n+3) или нет [я думаю, да, так как последний, кажется, требует дополнительной итерации; см. Ниже в многословном объяснении])

Ссылка (перейдите к разделу "Примеры", чтобы увидеть все возможности, и далее к разделу "Совместимость браузера" для, как вы уже догадались, совместимости браузера)

Вот многословное объяснение:

Метод, который @Turnerj затронул в своем ответе и который @bansal искал и который решает исходный вопрос, описывается в ссылке как "Функциональная нотация".

+ B Представляет элементы, чье числовое положение в серии родных элементов соответствует шаблону An + B, для каждого положительного целого или нулевого значения n. Индекс первого элемента равен 1. Значения A и B должны быть целыми числами.

Например, если вы хотите, чтобы ребенок от 3 до последнего ребенка, вы могли бы сделать :nth-child(n+3). (A=1; B=3) Как говорится в цитате, n всегда начинается с 0. Допустим, например, есть 5 детей. Это дает вам:

• ребенок 3 (0 + 3)
• ребенок 4 (1 + 3)
• ребенок 5 (2 + 3)

3 + 3 приведет к ребенку 6, который не существует. И поскольку n начинается с 0 и не становится отрицательным, нет никакого способа выбрать дочерний элемент 2 или 1.

Вы также можете получить ребенка 3 в начале, выполнив :nth-child(-n+3). (A=-1; B=3)

• ребенок 3 (-1 * 0 + 3)
• ребенок 2 (-1 * 1 + 3)
• ребенок 1 (-1 * 2 + 3)
• нет детей: 0 = (-1 * 3 + 3)

Если вы хотите, чтобы каждый 4-й ребенок, начиная с 3-го и до последнего ребенка, возвращался назад в группе из 15 детей :nth-child(4n-3). (A=4; B=-3) Следуя той же логике, что и раньше:

• нет детей: -3 = (4 * 0 - 3)
• ребенок 1 (4 * 1 - 3)
• ребенок 5 (4 * 2 - 3)
• ребенок 9 (4 * 3 - 3)
• ребенок 13 (4 * 4 - 3)

Даже если вы идете в обратном направлении, A [коэффициент n ] остается положительным, потому что B отрицательно, что можно рассматривать как начиная с -3 (с третьего по последний). Если коэффициент был отрицательным, вы бы опустились в отрицательные значения и никогда не получили бы положительное число (где дети). В том же сценарии тот же результат может быть достигнут

• :nth-child(-4n+13) (каждый 4-й ребенок идет назад, начиная с 13-го ребенка)
• :nth-child(4n+1) (каждый 4-й ребенок, начиная с 1-го ребенка)
• :nth-child(4n-15) (каждый 4-й ребенок, начиная с 15-го до последнего ребенка)

Обратите внимание :nth-child(4n+5) исключит child 1, поскольку n не может быть отрицательным. Чтобы получить всех детей в последовательности (1,5,9,13 в этом примере),
остальная часть этого параграфа была отредактирована
если B положительный, паттерн должен начинаться с одного из концов последовательности (1-й или 13-й в этом примере). Любой паттерн, начинающийся с 9-го или 5-го, будет исключать другие числа. Он НЕ будет зацикливаться на начале, как по модулю (%). Но если B отрицателен (-7 или -1 1 для 9-го и 5-го соответственно в этом примере), вы всегда получите все дочерние элементы в последовательности независимо от того, с чего начинаете, предполагая, как упоминалось ранее, что A [коэффициент n ] сохраняется положительным.

Вы можете сделать :nth-child(odd) (:nth-child(2n+1)) и :nth-child(even) (:nth-child(2n)), но больше всего меня заинтересовало получение внутренние диапазоны. Это просто делается путем пересечения двух :nth-child().

Например, если вам нужен только 3-й и 5-й столбцы в таблице с 490 столбцами (проблема не имеет значения, я просто выбрал ее, потому что сколько раз мы должны прощать каждого человека в день)

• td:nth-child(-n+5) дает вам ребенка 1-5 или ребенка <5
• td:nth-child(n+3) дает ребенку 3-490 или ребенку> 3
• td:nth-child(odd) дает вам, я думаю, вы получите это

Итак, все вместе: td:nth-child(-n+5):nth-child(n+3):nth-child(odd). (Столбцы, которые меньше 5 И больше 3 И нечетные [это убирает дочерний элемент № 4].)

Я поместил его в этом порядке, чтобы минимизировать, сколько результатов будет создавать каждый селектор для следующего. Если сначала поставить td:nth-child(n+3), вы получите те же конечные результаты, но вы передадите потомок 3-490 следующему селектору вместо того, чтобы просто передать потомок 1-5. Это, вероятно, приводит к незначительному увеличению производительности, но, возможно, может быть полезно в более крупных масштабах.

Я не уверен, что этот последний бит о порядке на самом деле работает для любого браузера или браузеры уже оптимизируют это, но это был только мой мыслительный процесс.

В конце написания всего этого я подумал о td:nth-child(-n+5):nth-child(2n+3). Затем я подумал о td:nth-child(-2n+5):nth-child(n+3) и снова отредактировал, но я уже объяснил решение, которое у меня было изначально, поэтому я не буду стирать это и повторно объясните это, потому что я думаю, что это последнее решение имеет смысл из всех других приведенных примеров. Я просто скажу, что я думаю, что последний лучше, так как 1-й селектор n-го ребенка, т.е. td:nth-child(-2n+5) передает только 3 td td:nth-child(-2n+5) селектору вместо 5 td которые td:nth-child(-n+5) будет передан.

Ответ 4

не совсем уверен, что вы подразумеваете под "применением класса, выбрав класс", но я вижу, что вы бы хотели использовать селекторную строку css.

если с помощью этого столбца 5-й ребенка (?), которому нужен другой класс, вы имеете в виду все остальные, но этот ребенок в таблице имеет свойство text-overflow: ellipsis в нем, тогда это будет короткий альтернативный путь.

    .ListTaskTime td:not(:nth-of-type(5)) a{
        /*styles for ellipse goes here*/}
    .ListTaskTime td:nth-of-type(5) a{ 
        /*styles for not-ellipse goes here*/}

(странно, если классифицированный объект является <p>, эта конкретная селекторная строка не работает, но как <div> она делает..)

Можно также использовать tr>:nth-child(), чтобы также нацеливать на все объекты, разделяющие те же пространства, что и <td>. все остальные биты (несколько запросов и т.д.) были аккуратно обозначены другими. Извините, что, когда у вас есть два разных формата в таблице, довольно сложно указать их как в одном селекторе в plain css..for now?;)