First Child and Last Child Rules

Applying Different Styles to the First and Last Rows of Tables or Lists

If we want the first and last rows of a table or list that we use on our page to look different, we can use the first-child and last-child pseudo classes.


tr:first-child { font-weight:bold;
                       background-color:gray; }

tr:last-child { background-color:white; }

We can do the same for ul and ol lists:

li:first-child { font-weight:bold; 
                      background-color:gray; }

li:last-child { background-color:white; }

It also has uses such as:

tr:first-child(-n+2) { font-weight:bold; 
                     background-color:gray; }

tr:first-child(2n+1) { font-weight:bold; 
                     background-color:gray; }

You can review our previous topic to make each row look different.

Making the first or last row of the table different show, ul list making the first last row different, css first last child usage examples


Applying Different Styles to the First Element of List Try It

li:first-child { font-weight: bold;
                       background-color: gray; } /* styles of the first line */

li:last-child { background-color: white; }  /* styles of other lines */


Applying Different Styles To The First Row of Table Try It

tr:first-child { font-weight:bold;
                       background-color:gray; } /* styles of the first line */

tr:last-child { background-color:white; }  /* styles of other lines */



Read 396 times.

Online Users: 39