Targeting list items with CSS3 nth child


show more Targeting list items with CSS3 nth child provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver show less
please wait ...

Targeting list items with CSS3 nth child

When you're working with a series of list items, especially if it's a long list, it might be fitting to provide styling for alternate items like colored rows in a table. Until CSS3, the only way to accomplish this would be to assign different classes to every other list item and then create the CSS Rules accordingly. CSS3 includes a new type of selector called nth-child, which allows for easy styling of odd and even list items. Let me show you how to use this new selector. I have the resources.htm file from the Chapter 8 > 08_04 folder on screen, and we're in Design View at the moment.

So what we want to do is to take the list items that are shown here and make every other one stand out. So we'll do that by creating a new CSS rule that targets the odd items in the list. So I'm going to place by cursor in the first list item just so I can kind of preload the New CSS Rule definition box with the Selector, and let me close the Files panel, and then we'll click on N...

Targeting list items with CSS3 nth child
Video duration: 5m 27s 2h 30m Intermediate

Viewers:

Targeting list items with CSS3 nth child provides you with in-depth training on Web. Taught by Joseph Lowery as part of the Typography with CSS in Dreamweaver

Subject:
Web
Software:
Dreamweaver
Author:
please wait ...