How to Use Pseudo-Elements (:After, :Before) Inside a Table Row

table {  border: 1px solid black;  border-spacing: 0;  width: 300px;}td {  position: relative;  width: 33%;}tr.two td::before,table.two tr td::before {  background: rgba(255, 200, 0, 0.7);  bottom: 5%;  content: "";  left: 0;  position: absolute;  right: 0;  top: 5%;  z-index: -1;}tr.two td:first-child::before,table.two tr td:first-child::before {  box-shadow: -1em 0 0.2em 0 rgba(255, 200, 0, 0.4);  color: red;  content: "test";  left: 5%;}tr.two td:last-child::before,table.two tr td:last-child::before {  box-shadow: 1em 0 0.2em 0 rgba(255, 200, 0, 0.4);  right: 5%;}

<table>  <tr>    <td>td1</td>    <td>td2</td>    <td>td3</td>  </tr>  <tr class="two">    <td>td1</td>    <td>td2</td>    <td>td3</td>  </tr></table>
<table class="two">  <tr>    <td>td1</td>    <td>td2</td>    <td>td3</td>  </tr>  <tr>    <td>td1</td>    <td>td2</td>    <td>td3</td>  </tr></table>

using :before (or :after) or table tr's

I had a similar problem (almost exactly the same, actually). What I ended up doing was using the :after psuedo element, but moving it to where I wanted it with position: absolute and setting a left: 0 style.

So I updated your fiddle with this, and added a padding to the left side of the whole table (so you can see the content)

.moveTableLevel:after {
    position: absolute;
    content: 'up';
    left: 5px;
}

It kind of goes against my beliefs of using absolute positioning (which I think should be as little as possible), but it was the only way I could fix it. Hopefully this will work for you too.

Table expands on tr:before

This post helped me solve the problem. Seems :before actually "creates" a new table cell. Had to add the :before to the first in my code instead of the .

Is it possible to user pseudo-element (:after, :before) on table row safely?

Applying nth-child pseudo selector to a specific row class

This is the simplest method I could come up with, use the jQuery :visible selector to find all the visible tr elements (after they have been sorted) then simply apply CSS to alternating ones!

// reset the background
$j('tr').css('background', '#ccc');
$j('tr:visible').each(function(i){
    if((i % 2) == 0) {
        // apply background to every other one
        $j(this).css('background', 'yellow');
    }
});

e.g. http://jsfiddle.net/bDePR/1/

Edit:

This, by @amustill does the same but is more efficient/concise

// reset the background
$j('tr').css('background', '#ccc');
$j('.found').filter(':odd').css({ background: 'yellow' });

CSS :last-of-type pseudo-class right after :not

Short answer: what you're looking for is :last-of-class, which doesn't exist (quite yet).

The :last-of-type pseudo-class is based on :nth-child, which iterates through all children in a container and selects specific children by index. However, :last-of-type also takes into account the element's type, i.e. the HTML tag name (div, span, etc.).

None of these pseudo-classes, however, take into account any other part of your CSS selector. Class names, attribute selectors, etc., are not taken into account by :nth-child nor :last-of-type. For instance: you can select the last li within a container, but you cannot select the last thing of class "test".

li:last-of-type {
  /* this matches on the last `li` in the list */
  color: red;
}

li.test:last-of-type {
  /* this doesn't match because it needs to be _both_:
   * the last `li` in the list AND of class "test". */
  color: blue;
}

<ul>
  <li class="test">foo</li>
  <li>bar</li>
</ul>

---

Related Topics