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/
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>