{"rowid": 192, "title": "Cleaner Code with CSS3 Selectors", "contents": "The parts of CSS3 that seem to grab the most column inches on blogs and in articles are the shiny bits. Rounded corners, text shadow and new ways to achieve CSS layouts are all exciting and bring with them all kinds of possibilities for web design. However what really gets me, as a developer, excited is a bit more mundane. \n\nIn this article I\u2019m going to take a look at some of the ways our front and back-end code will be simplified by CSS3, by looking at the ways we achieve certain visual effects now in comparison to how we will achieve them in a glorious, CSS3-supported future. I\u2019m also going to demonstrate how we can use these selectors now with a little help from JavaScript \u2013 which can work out very useful if you find yourself in a situation where you can\u2019t change markup that is being output by some server-side code.\n\nThe wonder of nth-child\n\nSo why does nth-child get me so excited? Here is a really common situation, the designer would like the tables in the application to look like this:\n\n\n\nSetting every other table row to a different colour is a common way to enhance readability of long rows. The tried and tested way to implement this is by adding a class to every other row. If you are writing the markup for your table by hand this is a bit of a nuisance, and if you stick a row in the middle you have to change the rows the class is applied to. If your markup is generated by your content management system then you need to get the server-side code to add that class \u2013 if you have access to that code.\n\n\n\n
\nName | \n\t\t\tCards sent | \n\t\t\tCards received | \n\t\t\tCards written but not sent | \n\t\t
---|---|---|---|
Ann | \n\t\t\t40 | \n\t\t\t28 | \n\t\t\t4 | \n\t\t
Joe | \n\t\t\t2 | \n\t\t\t27 | \n\t\t\t29 | \n\t\t
Paul | \n\t\t\t5 | \n\t\t\t35 | \n\t\t\t2 | \n\t\t
Louise | \n\t\t\t65 | \n\t\t\t65 | \n\t\t\t0 | \n\t\t