add support for nth-last pseudo class selectors #199
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
With this commit the following CSS3 pseudo classes will be supported:
- :nth-last-child(an+b) and
- :nth-last-of-type(2a+b)
This is especially helpful to format tables with a fixed number of
columns, by using a combination of :nth-child and :nth-last-child.
Example, given the following markup:
```
<html>
<body>
<table>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
<th>Fourth Column</th>
<th>Fifth Column</th>
</tr>
<tr>
<td>Line 1a</td>
<td>Line 1b</td>
<td>Line 1c</td>
<td>Line 1d</td>
<td>Line 1e</td>
</tr>
</table>
<table>
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
<th>Fourth Column</th>
</tr>
<tr>
<td>Line 1a</td>
<td>Line 1b</td>
<td>Line 1c</td>
<td>Line 1d</td>
</tr>
</table>
</body>
</html>
```
The following styles can be used to format the tables, such that the
four-column table's last three columns will align with the last three
columns of the five-column table:
```
table tr th:nth-child(1):nth-last-child(5) { width: 30%; }
table tr th:nth-child(2):nth-last-child(4) { width: 10%; }
table tr th:nth-child(3):nth-last-child(3) { width: 20%; }
table tr th:nth-child(4):nth-last-child(2) { width: 20%; }
table tr th:nth-child(5):nth-last-child(1) { width: 20%; }
table tr th:nth-child(1):nth-last-child(4) { width: 40%; }
table tr th:nth-child(2):nth-last-child(3) { width: 20%; }
table tr th:nth-child(3):nth-last-child(2) { width: 20%; }
table tr th:nth-child(4):nth-last-child(1) { width: 20%; }
```
|
To all maintainers: It would be wonderful to have this feature available in 8.0.6. We are using the library within a project and our lives would be much more easier if the support for styling tables with the :nth-last-child pseudo class can be applied. Looking forward to hearing back from you. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
With this commit the following CSS3 pseudo classes will be supported:
This is especially helpful to format tables with a fixed number of columns, by using a combination of :nth-child and :nth-last-child.
Example, given the following markup:
The following styles can be used to format the tables, such that the four-column table's last three columns will align with the last three columns of the five-column table: