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. Sample: 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 EXERCISES 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 */