select multiple child in css [closed]

Question

I am trying to apply ellipsis class in css for a table. So there are some columns need to have this ellipsis class. I have multiple columns in a table.

I am doing this by nth-child property in css, Is there any some another way to select random multiple child?

I tried-

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

Though same table has one more column 5th-child, now for this child i need to make a separate class, hence for other columns.

I don't want to expand my css code. Is there any other solution?

Answer 1

You can separate the classes with a comma ,

.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 */ } 

Note: You need to check the nth-child and define it manually in your stylesheet, as CSS cannot decide it for you if columns increase.

If you are using a server side language for generating a dynamic table, you can use functions like substr() to cut down the letters.

Side note : You don't have to use > unless and until you don't have any child table, this is sufficient.. tbody tr td:nth-child(3)

Answer 2

If I understand the problem correctly, you're looking for a way to select just the 3rd and 5th column. Here is a way: td:nth-child(-2n+5):not(:first-child) or td:nth-child(-2n+5):nth-child(n+3)

(I'm not sure whether using 'nested selectors'[I just made this term up and am unsure if it is real] i.e. :not(:first-child) is faster than using Functional Notation i.e. :nth-child(n+3) or not[my guess is yes, since the latter seems to involve extra iteration; see below in the long-winded explanation])

Reference (scroll to "Examples" section to see all possibilities and further down to the "Browser compatibility" section for, you guessed it, browser compatibility)

Here's a long-winded explanation:

I had to edit this explanation one more time mainly because the whole concept of 'to-last' (e.g. starting at the 3rd to last child) is baloney. Functional Notation doesn't take into account the total children, so it cannot be thought of as starting selection from the end of the group of children

The method that @Turnerj touched on in his answer and that @bansal was looking for and that solves the original question is described in the reference as "Functional Notation".

An+B Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n. The index of the first element is 1. The values A and B must both be integers.

For example, if you want child 3 through the last child you could do :nth-child(n+3). (A=1; B=3) Like the quote says, n always starts from 0. Let's say there are 5 children for example. This gives you:

• child 3(0+3)
• child 4(1+3)
• child 5(2+3)

3+3 will result in child 6 which doesn't exist. And since n starts at 0 and doesn't go negative, there's no way to select child 2 or 1.

You can also get child 3 to the beginning by doing :nth-child(-n+3). (A=-1; B=3)

• child 3(-1*0 + 3)
• child 2(-1*1 + 3)
• child 1(-1*2 + 3)
• no child: 0=(-1*3 + 3)

The following section can be skipped to avoid confusion. It has been left here for anyone who had read the uncorrected baloney before, so they can "unlearn" any falsehoods they had accepted as true

BEGINNING OF BALONEY "TO-LAST" SECTION[HAS BEEN CORRECTED]

---

If you want every 4th child starting from the 3rd to last child going backwards in a group of 15 children, :nth-child(4n-3). (A=4; B=-3) Actually, going backwards should make A=-4, and also, you can't do "to last", but in this special case it works Following the same logic as before:

• no child: -3=(4*0 - 3)
• child 1(4*1 - 3)
• child 5(4*2 - 3)
• child 9(4*3 - 3)
• child 13(4*4 - 3)

Even though you're going backwards, A[the coefficient of n] stays positive because B is negative, which can be thought of as starting at -3(3rd to last).

This "to-last" stuff only works when T % A = A - 1, where T is the total number of children. This works out so the Tth child, so to speak, can be referred to as -1 in terms of A, if that makes sense. In this example, where T is 15 and A is 4, 15 % 4 = 3 = 4 - 1, so it works. Further explanation: if we were counting in "to last" in terms of 4, so to speak,

-3 -2 -1 0 |-3 -2 -1 0|-3 -2 -1 0 |-3 -2 -1"to-last" in 4

-15 -14 -13 -12|-11 -10 -9 -8|-7 -6 -5 -4 |-3 -2 -1"to-last"

1 2 3 4 | 5 6 7 8| 9 10 11 12| 13 14 15Regular

1 2 3 4 | 1 2 3 4| 1 2 3 4 | 1 2 3In 4

15 ends up being correctly referred to as -1 or last and 14 as -2 or 2nd to last and 13 as -3 or 3rd to last etc.

But would it work if the total number of children T were 16? By the given formula, T % A = A - 1 [16 % 4 = 0 ≠ 4 - 1], we shouldn't expect it to work. We'd want 16 to be -1 and 15 to be -2, but they aren't. For curious people, the "to-last" thinking only works for T=15 when A=1,2,4,8(factors of 16(T+1); for T=16, since T+1=17 is a prime number, only A=1 lets the "to-last" thinking work

If the "to-last" stuff always worked, we'd expect :nth-child(4n-3) (A=4; B=-3) with T = 16 instead of 15, to mean going in multiples of 4 from the 3rd to last number. And we'd expect the 3rd to last number, 14, to be in the sequence, but here's what really happens:

• no child: -3=(4*0 - 3)
• child 1(4*1 - 3)
• child 5(4*2 - 3)
• child 9(4*3 - 3)
• child 13(4*4 - 3)

YOU GET THE SAME KIDS[CHILDREN]:). So you see, the same children are produced because of the relationship between A and B. T's only role is to determine the limit(the sequence could include the 17th child, but T=16).

Ok back to original text talking about T = 15

If the coefficient was negative, you'd descend into the negatives and never get a positive number(which is where the children are). In other words, A<0; B<0 gives no children.

In the same scenario, the same result could also be achieved by

• :nth-child(-4n+13)(every 4th child going backwards starting from the 13th child)
• :nth-child(4n+1)(every 4th child starting at the 1st child)
• :nth-child(4n-15)(every 4th child starting from the 15th to last childwhen B is negative, you can't think of it in terms of starting from the Bth to last child, as explained above)

Notice that :nth-child(4n+5) will exclude child 1 because n cannot be negative. To get all the children in the sequence(1,5,9,13 in this example), with B being POSITIVE, the pattern must start at one of the ends of the sequence(1st or 13th in this example). Any pattern starting at the 9th or 5th will exclude other numbers. It will NOT loop to the beginning like modulo(%). But if B is negative(-7 or -11 for 9th and 5th, respectively or any further negative number that is less by a multiple of 4, in this example), you will always get all the children in the sequence regardless of where you start, assuming, as mentioned before, that A[coefficient of n] is kept positive.

---

END OF BALONEY "TO-LAST" SECTION[HAS BEEN CORRECTED]

You can do :nth-child(odd)(:nth-child(2n+1)) and :nth-child(even)(:nth-child(2n)), but the one I was most interested in was getting the internal ranges. This is just done by taking the intersect of two :nth-child()'s.

For example, if you want just the 3rd and 5th column, in a table with 490 columns (it doesn't matter to the problem, I just chose it because it's how many times we should forgive each person per day)

• td:nth-child(-n+5) gives you child 1-5 or child ≤ 5
• td:nth-child(n+3) gives you child 3-490 or child ≥ 3
• td:nth-child(odd) gives you I think you get it

So all together that's: td:nth-child(-n+5):nth-child(n+3):nth-child(odd). (The columns that are less than 5 AND greater than 3 AND odd[this takes out child #4].)

I put it in this order to minimize how many results each selector would create for the next one. If, you put td:nth-child(n+3) first, you'd get the same final results, but you'd pass child 3-490 to the next selector instead of just passing child 1-5. This probably makes an insignificant increase in performance, but maybe could be useful at larger scales.

I'm not sure if this last bit about order is actually how it works for any browser at all, or if browsers already optimize that, but that was just my thought process.

At the end of writing all this, I thought of td:nth-child(-n+5):nth-child(2n+3). Then I thought of td:nth-child(-2n+5):nth-child(n+3) and edited again, but I'd already explained the solution I had originally, so I won't erase that and re-explain this one because I think this last solution makes sense from all the other examples given. I'll just say that I think the last one is best since the 1st nth-child selector i.e. td:nth-child(-2n+5) passes only 3 tds to the 2nd selector instead of the 5 tds that td:nth-child(-n+5) would pass on.