Css Selectors Demo
Today we’ll take a look at one of the new features in css3, by using the selector. Css3 is packed with some new, great features, which simplifies the styling of lists. We’ll show you how to use Alternative row styling with pure css. This is something that you typically would have to use either javascript or programming (php,asp) to achieve earlier, but here you will see how to do this with just a few lines of css.
Be aware that not all browsers are yet supported to use css3. IE does not yet support this, but if you give it a try in Firefox, Opera or Safari, you’ll see how nice this plays!
This is the result:
As you can see, the even and odd is ehh..even and odd! The Every third line can be set to whatever you want. Take a look at the css:
/* Css3 selector demo by csstemplatesweb.com */ * { margin: 0; padding: 0; outline: 0; } body { background-color: #2f3135; color: #fff; } h1 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 40px 0; } h2 { font-family: "Tahoma"; color: #ececec; font-weight: normal; margin:0 0 30px 30px; } h3 { font-family: "Tahoma"; color: #fff; font-weight: normal; margin:0 0 10px 30px; } img { border: none; } #container { width: 960px; margin: 20px auto; } ul { margin: 0 0 15px 60px; } ul.odd li:nth-child(odd) { color: blue; margin-left: 15px; } ul.even li:nth-child(even) { color: green; margin-left: 15px; } ul.every3 li:nth-child(3n) { color: orange; margin-left: 15px; } p {margin:20px 0 0 40px;} a {color:#fff;} |
The only thing you need to look at here, is the 4 lines starting with ul. It’s pretty self explaining 
The html markup looks like this:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Css3 selectors</title> <link rel="Stylesheet" href="styles.css" /> </head> <body> <div id="container"> <h1>Css3 Selector demo</h1> <h2>Alternate row styling</h2> <h3>Even</h3> <ul class="even"> <li>A sample text here 1</li> <li>A sample text here 2</li> <li>A sample text here 3</li> <li>A sample text here 4</li> </ul> <h3>Odd</h3> <ul class="odd"> <li>A sample text here 1</li> <li>A sample text here 2</li> <li>A sample text here 3</li> <li>A sample text here 4</li> </ul> <h3>Every third row</h3> <ul class="every3"> <li>A sample text here 1</li> <li>A sample text here 2</li> <li>A sample text here 3</li> <li>A sample text here 4</li> <li>A sample text here 5</li> <li>A sample text here 6</li> </ul> <p>For more tutorials, articles and css templates, please visit <a href="https://csstemplatesweb.com">csstemplatesweb.com</a></p> </div> </body> </html> |
That’s it! You can download the files below if you want to play with it. Please share this if you like it!
Css3 Selectors demo (975 bytes, 335 hits)
Continue reading...
