D
D
dnv7772012-03-04 17:20:53
css
dnv777, 2012-03-04 17:20:53

CSS: help write interlaced highlight selector without regard to specific class

It is necessary to do through line highlighting, but ignore (jump) the .space class
In the following example, you need to highlight the 2nd and 5th lines (if you ignore .space when counting, the 5th line becomes the 4th even)
1.tr
2.tr
3.tr.space
4 .tr
5.tr

do this
.grid>tbody>tr:not(.space):nth-child(even){background-color:#E6E0C5 !important}

however nth-child is considered from parent ignoring other selectors (in my case :not(.space) )
how can I change the selector so that even counts do not take into account .space?



of course, you can calculate on the server, and if I don’t find a solution, I’ll do it. However, I would like to know if it is possible to do this in CSS?

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
avrelian, 2012-03-04
@dnv777

Yes. Make it real.
But the solution is devoid of any practical sense, since for reliable work for each row of the table in which the class can appear space, two selectors will need to be added to the css file. Here is a working example .
Here are the styles for the first 3 lines:

tr:not(.space):nth-child(even) { background-color:#E6E0C5; }
tr:not(.space):nth-child(odd) { background-color:#FFF; }

.space
  ~tr:not(.space):nth-child(odd) { background-color:#E6E0C5; }
.space
  ~tr:not(.space):nth-child(even) { background-color:#FFF; }

.space~.space
  ~tr:not(.space):nth-child(even) { background-color:#E6E0C5; }
.space~.space
  ~tr:not(.space):nth-child(odd) { background-color:#FFF; }

S
Stdit, 2012-03-04
@Stdit

As far as I know, the nth-child selector only selects by child number. The nth-of-type selector is also not good, because there is nothing to replace tr with. If this task is related to the formation of sections in the table, then the output can be to use for each its own tbody:

<tbody>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
</tbody>
<tbody>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
    <tr><td>a</td></tr>
</tbody>
Of course, such a table is a little more difficult to generate, but still I think it's better than writing class="odd", class="even" on each line, and besides, it will not lead to distortion after dynamically deleting or adding rows to a section.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question