使用第n个类型的计数器

Question

Is it possible to have a counter with nth-type something like this:

td:nth-of-type(counter(section)):before { 
     content: "Date"counter(section); 
     counter-increment: section;
}

Where counter is initialized as

#myTable  tr { 
    border: 1px solid #ccc; 
    counter-reset: section;counter-increment: section;
}

What I'm trying to do is this - check if tr has class iR and if it does, the structure looks like this:

table.myTable td:nth-of-type(1):before { content: "Date"; }
table.myTable td:nth-of-type(2):before { content: "Fajr"; }
table.myTable td:nth-of-type(3):before { content: "Fr"; }
table.myTable td :nth-of-type(4):before { content: "Se"; }
table.myTable td:nth-of-type(5):before { content: "Dr"; }
table.myTable td:nth-of-type(6):before { content: " "; }
table.myTable td:nth-of-type(7):before { content: "A"; }
table.myTable td:nth-of-type(8):before { content: " "; }
table.myTable td:nth-of-type(9):before { content: "Mb"; }
table.myTable td:nth-of-type(10):before { content: " "; }
table.myTable td:nth-of-type(11):before { content: "I"; }
table.myTable td:nth-of-type(12):before { content: ""; }

If not it will be like this

table.myTable td:nth-of-type(1):before { content: "Date"; }
table.myTable td:nth-of-type(2):before { content: "Fr"; }
table.myTable td :nth-of-type(3):before { content: "Se"; }
table.myTable td:nth-of-type(4):before { content: "Dr"; }
table.myTable td:nth-of-type(5):before { content: "A"; }
table.myTable td:nth-of-type(6):before { content: "Mb"; }
table.myTable td:nth-of-type(7):before { content: "I"; }

Here is jsfiddle what Im trying to do https://jsfiddle.net/wj5gnafm/1/

Answer 1

Based on the fiddle that is now provided in question, you don't even need a counter . You should be able to achieve this just by using the class and negation selectors that I had mentioned in my original answer. Below is a sample snippet.

 td { border: 1px solid; } table tr.iRow td:nth-of-type(1):before { content: 'Date '; } table tr.iRow td:nth-of-type(2):before { content: 'Fr '; } table tr.iRow td:nth-of-type(3):before { content: ''; } table tr.iRow td:nth-of-type(4):before { content: 'Se '; } table tr.iRow td:nth-of-type(5):before { content: 'Dr '; } table tr.iRow td:nth-of-type(6):before { content: ''; } table tr.iRow td:nth-of-type(7):before { content: 'A '; } table tr.iRow td:nth-of-type(8):before { content: ''; } table tr.iRow td:nth-of-type(9):before { content: 'Mb '; } table tr.iRow td:nth-of-type(10):before { content: ''; } table tr.iRow td:nth-of-type(11):before { content: 'I '; } table tr.iRow td:nth-of-type(12):before { content: ''; } table tr:not(.iRow) td:nth-of-type(1):before { content: 'Date '; } table tr:not(.iRow) td:nth-of-type(2):before { content: 'Fr '; } table tr:not(.iRow) td:nth-of-type(3):before { content: 'Se '; } table tr:not(.iRow) td:nth-of-type(4):before { content: 'Dr '; } table tr:not(.iRow) td:nth-of-type(5):before { content: 'A '; } table tr:not(.iRow) td:nth-of-type(6):before { content: 'Mb '; } table tr:not(.iRow) td:nth-of-type(7):before { content: 'I '; } 

 <table> <tr class='iRow'> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>F</td> <td>G</td> <td>H</td> <td>I</td> <td>J</td> <td>K</td> <td>L</td> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td>E</td> <td>E</td> <td>E</td> </tr> </table> 

---

Answer for original question:

As I had mentioned in my comment to the question, you cannot pass the counter's value as argument to the nth-of-type (or any other nth-* ) selectors.

You can achieve your expected output by doing the counter-increment only when the required class is present (by using class selector) and use :not([classname]) to increment the other counter.

While displaying the value, make use of either the class or the class-negation in the selector and then display the value as required. Below is a sample snippet.

 table { counter-reset: section, section-other; } table, tr, td { border: 1px solid; } table tr.iRow { counter-increment: section; background: sandybrown; /* just for distinction */ } table .iRow td:nth-of-type(1):before { content: "Foo." counter(section)" "; } table .iRow td:nth-of-type(2):before { content: "Bar." counter(section)" "; } table .iRow td:nth-of-type(3):before { content: "Baz." counter(section)" "; } table tr:not(.iRow) { counter-increment: section-other; background: wheat; /* just for distinction */ } table tr:not(.iRow) td:nth-of-type(1):before { content: "ooF." counter(section-other)" "; } table tr:not(.iRow) td:nth-of-type(2):before { content: "raB." counter(section-other)" "; } table tr:not(.iRow) td:nth-of-type(3):before { content: "zaB." counter(section-other)" "; } 

 <table> <tr class='iRow'> <td>A</td><td>B</td><td>C</td> </tr> <tr class='iRow'> <td>A</td><td>B</td><td>C</td> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> <tr class='iRow'> <td>A</td><td>B</td><td>C</td> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> <tr class='iRow'> <td>A</td><td>B</td><td>C</td> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> </table>